使用jQuery,我如何按字母顺序排列并按字母顺序排列此文件?
添加大型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 &
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>
答案 0 :(得分: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');
工作(高度简化的数据集)示例:http://jsfiddle.net/redler/hwhrt/2/
答案 1 :(得分:0)
function sortAlpha(a,b){
return a.innerHTML > b.innerHTML ? 1 : -1;
};
$('ol li').sort(sortAlpha).appendTo('ol');
这样的东西?
此外,如果这是“有序”列表,您应该使用ol;)