的CSS

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.

我更希望将它们从列表项的第一个字母分组而不是类=＆＃34; A＆＃34;，但无论以哪种方式完成最简单的工作都可以。

提前致谢！

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

希望这有帮助！

Answer 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

Answer 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的数组

Answer 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 中获取灵感。

按字母顺序排列的jquery组

4 个答案:

Demo

的CSS

JQuery的