jQuery根据类别对列表项进行分组

Question

我是一名有用的助手，可以翻译文本。

我有一个无序的动态列表，其中所有类别都相同。我想将同一类别的列表项分组到主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>

- adams

Answer 1

这里有一个解决方案：

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，您可以在那里看到结果。 我仅为方便起见仅给第一个 UL 添加了一个 ID 。

- erikscandola

---

谢谢您提供的代码，但是 #BaseNode > LI 中的内容没有在新列表中显示，它们为空的。@erikscandola - adams

我不明白。你是什么意思？你是否已经将“BaseNode” ID添加到了你的第一个“ul”中？ - erikscandola

<ul id="BaseNode"><li class="a1">一些内容</li>... li元素的内容（一些内容）在新列表中不会显示。@erikscandola - adams

与原问题有些不同。我会为您更新我的代码。 - erikscandola

Answer 2

尝试这个，

var   classes = {};

$('ul li').each(function() {
 classes[$(this).attr('class')] = $(this).attr('class');
});
 
$.each(classes,function(entry) {
   $("."+entry).wrapAll("<li>"+entry.toUpperCase()+"<ul></ul></li>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<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>

- Shijin TR

---

使用 wrapAll，我没有想到。好答案 :-) - erikscandola