jQuery组按类别列出项目 [英] jQuery group list items by class
本文介绍了jQuery组按类别列出项目的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个具有相同班级列表项的无序动态列表.我想将相同的班级列表项分组到主要ul中的一个ul中. 如何对相同的班级列表项进行分组?
I have an unordered dynamic list with same class list items. and I want to group the same class list items into one ul in the main ul. How can I group same class list items?
我要转换以下动态列表
<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>
推荐答案
为您提供一个解决方案:
Here a solution for you:
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:
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
.
I created also a jsFiddle where you can see the result. I added an ID
to first UL
only for convenience.
这篇关于jQuery组按类别列出项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文