如何按字母顺序排列并按字母顺序排列此列表?

时间:2011-02-09 23:08:34

标签: jquery

使用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>

2 个答案:

答案 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;)