【问题标题】：jquery group array alphabeticallyjquery 组数组按字母顺序排列
【发布时间】：2014-07-25 11:47:08
【问题描述】：

我已经研究了一段时间，但找不到解决方案。如果有人能帮我解决这个问题，我将不胜感激。

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

<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" 分组，但无论哪种方式最容易完成工作都可以。

提前致谢！

【问题讨论】：

所以你想要一个数组中的列表项标签按组（类）排列对吗？
看看demo源码，或许能帮到你。

标签： jquery arrays sorting alphabetical

【解决方案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

希望这会有所帮助！

【讨论】：

我希望我能将所有这些答案都标记为正确！感谢大家快速、准确的回复，我非常感激！

【解决方案2】：

你可以用长度来做到这一点：

var listGroups = {};
    listGroups['A'] = $('.list-items .A').length + 
                      $('.list-items .B').length + 
                      $('.list-items .C').length;

现在如果你记录这个：

console.log(listGroups.A, " items found from A-C"); 
// logs "28  items found from A-C"

Demo

【讨论】：

【解决方案3】：

我不知道这是不是你要找的东西，但试试this：

jQuery：

var listGroups = {};
$('#1 li').each(function () {
    var liClass = $(this).attr('class');
    if (listGroups[liClass] === undefined) {
        listGroups[liClass] = new Array();
    }
    listGroups[liClass].push(this.outerHTML);
});

我在这里所做的是我在 UL 中创建了一个包含所有类的数组（A、B、C .....）在其中的每一个中，我都放置了一个属于该类的 LI 数组

【讨论】：

PS : 如果您想用 innerHTML 替换 outerHTML 以仅获取内部的“a”标签或使用 $(this).children('a').html() ;仅获取“a”标签内的文本

【解决方案4】：

如果我了解您想按类别显示您的元素分组。（在你的html类中等于第一个字母）

在 jquery 中，您可以通过这种方式进行多类选择：

css

ul li {
   display: none;
}

jQuery

$(".A, .B, .C").show();

获取总组元素：

var l = $(".A, .B, .C").length;
console.log(l);

看看example。

要在列中显示，您必须调整 css 或者您可以从这个 DEMO 中获得灵感。

【讨论】：