1. 首頁
  2. 問答
  3. 如何按字母順序排列此子列表？

如何按字母順序排列此子列表？

2011-02-09 84 views
1

使用jQuery，我該如何按字母順序排序並將字母順序排列？如何按字母順序排列此子列表？

http://see.weareinto.com/4UKn

加入大的HTML文件的小樣本。

<div class="two-col" id="content_well"> 
    <ul class="hierarchyLeft3 filtererd"> 


     <li><a href= 
      "/health-professionals/programs/center-for-outcomes-research-and-educati/Pages/default.aspx"> 
      Center for Outcomes Research and Education (CORE)</a></li> 
     <li> 
      <a href="/health-professionals/programs/camp-erin/Pages/default.aspx">Camp 
       Erin</a> 

      <ul> 
       <li><a href= 
        "/health-professionals/programs/providence-hospice-bereavement-services/Pages/default.aspx"> 
        Providence Hospice Bereavement Services</a></li> 

       <li><a href= 
        "/health-professionals/programs/providence-home-services/Pages/default.aspx">Providence 
        Home Services</a></li> 
      </ul> 
     </li> 
     <li><a href= 
      "/health-professionals/programs/childrens-inpatient-care-unit/Pages/default.aspx">Children's 
      Inpatient Care Unit</a></li> 

     <li> 
      <a href= 
      "/health-professionals/programs/gerry-frank-center-for-childrens-care/Pages/default.aspx"> 
       Gerry Frank Center for Children's Care</a> 

      <ul> 
       <li><a href= 
        "/health-professionals/programs/neurodevelopmental-center-for-children/Pages/default.aspx"> 
        Providence Neurodevelopmental Center for Children</a></li> 

       <li><a href= 
        "/health-professionals/programs/providence-pediatric-surgery/Pages/default.aspx"> 
        Providence Pediatric Surgery</a></li> 
      </ul> 
     </li> 

     <li><a href= 
      "/health-professionals/programs/hodgkin-and-nonhodgkin-lymphoma-program/Pages/default.aspx"> 
      Hodgkin and Non-Hodgkin Lymphoma Program</a></li> 

     <li><a href= 
      "/health-professionals/programs/labor-delivery/Pages/default.aspx">Labor &amp; 
      Delivery</a></li> 

     <li><a href= 
      "/health-professionals/programs/lifeline/Pages/default.aspx">Lifeline</a></li> 

     <li><a href= 
      "/health-professionals/programs/nicunewborn-care/Pages/default.aspx">NICU-Newborn 
      Care</a></li> 

     <li><a href= 
      "/health-professionals/programs/omlc-cell-therapy-and-regenerative-medic/Pages/default.aspx"> 
      OMLC Cell Therapy and Regenerative Medicine Program</a></li> 

     <li><a href= 
      "/health-professionals/programs/omlc-hemorrhage-control-technology-progr/Pages/default.aspx"> 
      OMLC Hemorrhage Control Technology Program</a></li> 

     <li><a href= 
      "/health-professionals/programs/omlc-optics-program/Pages/default.aspx">OMLC Optics 
      Program</a></li> 

     <li><a href= 
      "/health-professionals/programs/omlc-tropoelastin-biomaterials-program/Pages/default.aspx"> 
      OMLC Tropoelastin Biomaterials Program</a></li> 

     <li> 
      <a href= 
      "/health-professionals/programs/oregon-medical-laser-center-omlc/Pages/default.aspx"> 
       Oregon Medical Laser Center (OMLC)</a> 

      <ul> 
       <li><a href= 
        "/health-professionals/programs/omlc-cell-therapy-and-regenerative-medic/Pages/default.aspx"> 
        OMLC Cell Therapy and Regenerative Medicine Program</a></li> 

       <li><a href= 
        "/health-professionals/programs/omlc-hemorrhage-control-technology-progr/Pages/default.aspx"> 
        OMLC Hemorrhage Control Technology Program</a></li> 

       <li><a href= 
        "/health-professionals/programs/omlc-optics-program/Pages/default.aspx">OMLC 
        Optics Program</a></li> 

       <li><a href= 
        "/health-professionals/programs/omlc-tropoelastin-biomaterials-program/Pages/default.aspx"> 
        OMLC Tropoelastin Biomaterials Program</a></li> 
      </ul> 
     </li> 

     <li><a href= 
      "/health-professionals/programs/portland-diabetes-project/Pages/default.aspx">Portland 
      Diabetes Project</a></li> 

     <li><a href= 
      "/health-professionals/programs/pregnancy-services/Pages/default.aspx">Pregnancy 
      Services</a></li> 

     <li> 
      <a href= 
      "/health-professionals/programs/providence-acute-rehabilitation-center/Pages/default.aspx"> 
       Providence Acute Rehabilitation Center</a> 

      <ul> 
       <li><a href= 
        "/health-professionals/programs/providence-rehabilitation-services/Pages/default.aspx"> 
        Providence Rehabilitation Services</a></li> 
      </ul> 
     </li> 

     <li> 
      <a href= 
      "/health-professionals/programs/adolescent-eating-disorders-program/Pages/default.aspx"> 
       Providence Adolescent Eating Disorders Program</a> 

      <ul> 
       <li><a href= 
        "/health-professionals/programs/adult-eating-disorders-treatment-program/Pages/default.aspx"> 
        Providence Adult Eating Disorders Treatment Program</a></li> 
      </ul> 
     </li> 

     <li> 
      <a href= 
      "/health-professionals/programs/adolescent-inpatient-behavioral-health-t/Pages/default.aspx"> 
       Providence Adolescent Inpatient Behavioral Health Treatment</a> 

      <ul> 
       <li><a href= 
        "/health-professionals/programs/child-inpatient-behavioral-health-treatm/Pages/default.aspx"> 
        Providence Child Inpatient Behavioral Health Treatment</a></li> 
      </ul> 
     </li> 

     <li> 
      <a href= 
      "/health-professionals/programs/adult-eating-disorders-treatment-program/Pages/default.aspx"> 
       Providence Adult Eating Disorders Treatment Program</a> 

      <ul> 
       <li><a href= 
        "/health-professionals/programs/adolescent-eating-disorders-program/Pages/default.aspx"> 
        Providence Adolescent Eating Disorders Program</a></li> 
      </ul> 
     </li> 

     <li><a href= 
      "/health-professionals/programs/providence-als-center/Pages/default.aspx">Providence 
      ALS Center</a></li> 

     <li><a href= 
      "/health-professionals/programs/providence-arrhythmia-services/Pages/default.aspx">Providence 
      Arrhythmia Services</a></li> 

     <li> 
      <a href= 
      "/health-professionals/programs/autologous-stem-cell-transplant-program/Pages/default.aspx"> 
       Providence Autologous Stem Cell Transplant Program</a> 

      <ul> 
       <li><a href= 
        "/health-professionals/programs/providence-cancer-center/Pages/default.aspx">Providence 
        Cancer Center</a></li> 
      </ul> 
     </li> 

     <li> 
      <a href= 
      "/health-professionals/programs/providence-behavioral-health/Pages/default.aspx">Providence 
       Behavioral Health</a> 

      <ul> 
       <li><a href= 
        "/health-professionals/programs/adolescent-eating-disorders-program/Pages/default.aspx"> 
        Providence Adolescent Eating Disorders Program</a></li> 

       <li><a href= 
        "/health-professionals/programs/adolescent-inpatient-behavioral-health-t/Pages/default.aspx"> 
        Providence Adolescent Inpatient Behavioral Health Treatment</a></li> 

       <li><a href= 
        "/health-professionals/programs/adult-eating-disorders-treatment-program/Pages/default.aspx"> 
        Providence Adult Eating Disorders Treatment Program</a></li> 

       <li><a href= 
        "/health-professionals/programs/behavioral-health-adult-inpatient-treatm/Pages/default.aspx"> 
        Providence Behavioral Health Adult Inpatient Treatment</a></li> 

       <li><a href= 
        "/health-professionals/programs/child-inpatient-behavioral-health-treatm/Pages/default.aspx"> 
        Providence Child Inpatient Behavioral Health Treatment</a></li> 

       <li><a href= 
        "/health-professionals/programs/psychiatric-dialectical-behavior-outpati/Pages/default.aspx"> 
        Providence Psychiatric Dialectical Behavior Outpatient Therapy Program</a></li> 

       <li><a href= 
        "/health-professionals/programs/psychiatric-intensive-outpatient-program/Pages/default.aspx"> 
        Providence Psychiatric Intensive Outpatient Program</a></li> 

       <li><a href= 
        "/health-professionals/programs/psychiatric-outpatient-partial-hospital-/Pages/default.aspx"> 
        Providence Psychiatric Outpatient Partial Hospital Program</a></li> 

       <li><a href= 
        "/health-professionals/programs/providence-psychiatry-clinic/Pages/default.aspx"> 
        Providence Psychiatry Clinic</a></li> 

       <li><a href= 
        "/health-professionals/programs/providence-substance-abuse-treatment/Pages/default.aspx"> 
        Providence Substance Abuse Treatment</a></li> 

       <li><a href= 
        "/health-professionals/programs/providence-youth-services/Pages/default.aspx">Providence 
        Youth Services</a></li> 
      </ul>

來源

2011-02-09 Kirk Strobeck

+2

請在問題中發佈相關信息。我無法訪問您的文件。在這一點上，我不能說出你在問什麼。 – user113716 2011-02-09 23:14:46

+0

@patrickdw：不是說它無法訪問，它只是巨大的。 – 2011-02-09 23:21:07

回答

2

：

function sortItem(a, b) { 
    return $.trim($(a).find('a').text()) > $.trim($(b).find('a').text()) ? 1 : -1; 
} 

function sortList(root) { 
    $(root).children('li') 
     .sort(sortItem) 
     .appendTo(root) 
     .children('ul') 
     .each(function() { 
      sortList(this); // recurse 
    }); 
} 

sortList('ul.hierarchyLeft3');

工作（高度縮減的數據集）示例：

來源

2011-02-10 01:12:22

0 
function sortAlpha(a,b){ 
    return a.innerHTML > b.innerHTML ? 1 : -1; 
}; 

$('ol li').sort(sortAlpha).appendTo('ol');

像這樣的事情？

而且，如果這是一個「命令」列表中，您應該使用醇;如果你想潛下去和排序的所有列表和子列表在任意深度，你可以嘗試這樣的事情）

來源

2011-02-10 00:27:59

相關問題

 相關問題