jQuery 按类对列表项进行分组

我有一个具有相同类列表项的无序动态列表。我想将相同的类列表项分组到主 ul 中的一个 ul 中。 如何对相同类别的列表项进行分组？

我想转换下面的动态列表

<ul>
    <li class="a1">Some Content</li>
    <li class="a1">Some Content</li>
    <li class="a1">Some Content</li>
    <li class="a1">Some Content</li>
    <li class="a2">Some Content</li>
    <li class="a2">Some Content</li>
    <li class="a3">Some Content</li>
</ul>

进入这个

<ul>
    <li>A1
        <ul>
            <li class="a1">Some Content</li>
            <li class="a1">Some Content</li>
            <li class="a1">Some Content</li>
            <li class="a1">Some Content</li>
        </ul>
    </li>
    <li>A2
        <ul>
            <li class="a2">Some Content</li>
            <li class="a2">Some Content</li>
        </ul>
    </li>
    <li>A3
        <ul>
            <li class="a3">Some Content</li>
        </ul>
    </li>
</ul>

这里为您提供解决方案：

HTML:

<ul id="BaseNode">
    <li class="a1">A</li>
    <li class="a1">B</li>
    <li class="a1">C</li>
    <li class="a1">D</li>
    <li class="a2">E</li>
    <li class="a2">F</li>
    <li class="a3">G</li>
</ul>

jQuery:

$(document).ready(function(){
    var lis = $("#BaseNode > LI");
    var as = { };

    $.each(lis, function(i, el){
        var c = $(el).attr("class");

        if(as[c] == null) {
            as[c] = new Array();
        }

        as[c].push(el);
    });

    $("#BaseNode").empty();
    $.each(as, function(i, el) {
        var li = $("<li>" + i.toUpperCase() + "</li>");
        var ul = $("<ul></ul>");

        $(ul).append(el);
        $(li).append(ul);
        $("#BaseNode").append(li);
    });
});

我还创建了一个jsFiddle您可以在其中看到结果。我添加了一个ID首先UL只是为了方便。