jquery 分组数组按字母顺序排列

Question

我已经研究了一段时间了，但找不到解决方案。如果有人能在这方面帮助我，我将非常感激。

基本上我有一个像这样的列表:

<ul class="list-items" id="1">
    <li class="3"><a href="/courses/art-design-and-photography/hnc-3d-computer-animation">3D Computer Animation</a> HNC SCQF Level     7  </li>
    <li class="A"><a href="/courses/business-and-management/hnc-accounting">Accounting</a> HNC SCQF Level     7  </li>
    <li class="A"><a href="/courses/business-and-management/hnd-accounting">Accounting</a> HND SCQF Level     8  </li>
    <li class="A"><a href="/courses/business-and-management/ncga-administration">Administration</a> NCGA SCQF Level     5  </li>
    <li class="A"><a href="/courses/business-and-management/svq-administration">Administration</a> SVQ SCQF Level     5  </li>
    <li class="A"><a href="/courses/business-and-management/hnc-administration-information">Administration &amp; Information</a> HNC SCQF Level     7  </li>
    <li class="A"><a href="/courses/business-and-management/hnd-administration-information">Administration &amp; Information</a> HND SCQF Level     8  </li>
    <li class="A"><a href="/courses/computing-and-it/advanced-ecdl-word-processing-2013">Advanced ECDL: Word Processing 2013 </a> Equivalent to SCQF Level     4  </li>
    <li class="A"><a href="/courses/business-and-management/hnd-advertising-pr">Advertising &amp; PR</a> HND SCQF Level     8  </li>
    <li class="A"><a href="/courses/care/award-alcohol-awareness">Alcohol Awareness</a> Award, Level 1     Equivalent to SCQF Level     4  </li>
    <li class="A"><a href="/courses/animal-care/introduction-animal-care">Animal Care</a> Introduction SCQF Level     4/5  </li>
    <li class="A"><a href="/courses/animal-care/nc-animal-care">Animal Care</a> NC SCQF Level     5  </li>
    <li class="A"><a href="/courses/animal-care/hnd-animal-care">Animal Care</a> HND SCQF Level     8  </li>
    <li class="A"><a href="/courses/art-design-and-photography/art-design">Art &amp; Design</a> SCQF Level     4/5  </li>
    <li class="A"><a href="/courses/art-design-and-photography/nc-art-design">Art &amp; Design</a> NC SCQF Level     6  </li>
    <li class="A"><a href="/courses/art-design-and-photography/hnc-art-design">Art &amp; Design</a> HNC SCQF Level     7  </li>
    <li class="A"><a href="/courses/art-design-and-photography/hnd-art-design">Art &amp; Design</a> HND SCQF Level     8  </li>
    <li class="A"><a href="/courses/automotive-and-construction/diploma-automotive-accident-repair-principles-body-paint">Automotive Accident Repair Principles (Body &amp; Paint)</a> Diploma SCQF Level     4  </li>
    <li class="A"><a href="/courses/automotive-and-construction/diploma-automotive-maintenance-repair-principles">Automotive Maintenance &amp; Repair  Principles</a> Diploma, Level 1 SCQF Level     4  </li>
    <li class="A"><a href="/courses/automotive-and-construction/diploma-automotive-maintenance-repair-principles-0">Automotive Maintenance &amp; Repair  Principles</a> Diploma, Level 2 SCQF Level     5  </li>
    <li class="B"><a href="/courses/automotive-and-construction/nc-built-environment">Built Environment</a> NC SCQF Level     5/6  </li>
    <li class="B"><a href="/courses/automotive-and-construction/hnc-built-environment">Built Environment</a> HNC SCQF Level     7  </li>
    <li class="B"><a href="/courses/business-and-management/ncga-business">Business</a> NCGA SCQF Level     5  </li>
    <li class="B"><a href="/courses/business-and-management/hnc-business">Business</a> HNC SCQF Level     7  </li>
    <li class="B"><a href="/courses/business-and-management/hnd-business">Business</a> HND SCQF Level     8  </li>
    <li class="B"><a href="/courses/business-and-management/introduction-business-administration">Business &amp; Administration</a> Introduction SCQF Level     4  </li>
    <li class="B"><a href="/courses/business-and-management/ncga-business-with-esol">Business with ESOL</a> NCGA SCQF Level     4  </li>
    <li class="C"><a href="/courses/art-design-and-photography/nc-computer-arts-animation">Computer Arts &amp; Animation</a> NC SCQF Level     6  </li>
    <li class="C"><a href="/courses/automotive-and-construction/introduction-construction-crafts">Construction (Crafts)</a> Introduction SCQF Level     4/5  </li>
    <li class="E"><a href="/courses/esol/pre-intermediate-english-for-speakers-of-other-languages-esol">English for Speakers of Other Languages (ESOL)</a> Pre-intermediate, Pre-intermediate     Equivalent to SCQF Level     5  </li>
    <li class="E"><a href="/courses/esol/pre-intermediate-english-for-speakers-of-other-languages-pt">English for Speakers of Other Languages (ESOL)</a> Pre-intermediate, Pre-intermediate SCQF Level     1  </li>
    <li class="E"><a href="/courses/business-and-management/hnd-events-management">Events Management</a> HND SCQF Level     8  </li>
    <li class="F"><a href="/courses/art-design-and-photography/nc-fashion-design-manufacture">Fashion Design &amp; Manufacture</a> NC SCQF Level     6  </li>
    <li class="F"><a href="/courses/art-design-and-photography/city-guilds-level-2-diploma-floristry">Floristry</a> City &amp; Guilds Level 2 Diploma SCQF Level     5  </li>
    <li class="G"><a href="/courses/automotive-and-construction/npa-general-building">General Building</a> NPA SCQF Level     5  </li>
    <li class="I"><a href="/courses/computing-and-it/it-in-business-word-processing-and-presentations">IT in Business: Word Processing and Presentations</a>    Equivalent to SCQF Level     5  </li>
    <li class="L"><a href="/courses/business-and-management/hnd-legal-services">Legal Services</a> HND SCQF Level     8  </li>
    <li class="P"><a href="/courses/art-design-and-photography/nc-photography">Photography</a> NC SCQF Level     6  </li>
    <li class="P"><a href="/courses/art-design-and-photography/hnd-photography">Photography</a> HND SCQF Level     8  </li>
    <li class="R"><a href="/courses/engineering/rya-day-skipper-shore-based-course">RYA Day Skipper Shore Based Course</a>      </li>
    <li class="S"><a href="/courses/care/supporting-people-with-down-syndrome">Supporting People with Down Syndrome</a>    Equivalent to SCQF Level     4  </li>
    <li class="T"><a href="/courses/art-design-and-photography/hnd-textiles">Textiles</a> HND SCQF Level     8  </li>
    <li class="T"><a href="/courses/engineering/thermofluids">Thermofluids</a>    Equivalent to SCQF Level     4  </li>
    <li class="T"><a href="/courses/business-and-management/nc-travel-tourism">Travel &amp; Tourism</a> NC SCQF Level     5  </li>
    <li class="T"><a href="/courses/business-and-management/hnd-travel-tourism">Travel &amp; Tourism</a> HND SCQF Level     8  </li>
    <li class="T"><a href="/courses/business-and-management/nc-travel-tourism-with-esol">Travel &amp; Tourism with ESOL</a> NC SCQF Level     5  </li>
    <li class="U"><a href="/courses/care/certificate-understanding-end-of-life-care">Understanding End of Life Care</a> Certificate, Level 2     Equivalent toSCQF Level     4  </li>
    <li class="V"><a href="/courses/animal-care/city-guilds-level-3-diploma-veterinary-nursing-small-animal">Veterinary Nursing (Small Animal)</a> City &amp; Guilds Level 3 Diploma SCQF Level     6  </li>
    <li class="V"><a href="/courses/art-design-and-photography/hnd-visual-communication">Visual Communication</a> HND SCQF Level     8  </li>
    <li class="W"><a href="/courses/computing-and-it/advanced-word">Word</a> Advanced Equivalent to SCQF Level     4  </li>
</ul>

我需要获取所有这些列表项并按字母/数字将它们分组到数组中，然后我可以对它们进行计数并将它们分组(A-C(25 项))并在列中显示它们。

知道如何将它们放入数组中，例如:

var listGroups[A] = the list items.

我更愿意将它们按照列表项的第一个字母而不是 class="A"进行分组，但无论哪种方式最容易完成工作都可以。

提前致谢!

Answer 1

这将每个“类别”存储在不同的数组中(myArray 将包含一堆数组)然后您可以决定使用 myArray['A'] 或 myArray['B'] 等检索条目，这样您就可以轻松地将它们分组。

此方法在检索文本时不需要添加 class="A"、class="B" 等。

Javascript:

$(function(){
    var myArray = [];
    $.each($(".list-items li"), function(index, value){
        var text = $(value).text();
        var firstLetter = text.charAt(0);

        if(!myArray[firstLetter]) myArray[firstLetter] = [];
        myArray[firstLetter].push(text); 
    });

    console.log(myArray);
});

DEMO

希望这有帮助!