我进行了搜索并努力实现这一目标,但完全陷于困境,希望有人能为您提供帮助。基本上,我希望能够单击一个按钮并使用jQuery通过组标题按字母顺序对无序列表进行排序,然后在每个组内按字母顺序对每个嵌套列表进行排序。提前非常感谢,这里...
默认列表:
<ul id="list">
<li><a href="#" rel="Meat">Lamb</a></li>
<li><a href="#" rel="Meat">Pork</a></li>
<li><a href="#" rel="Meat">Beef</a></li>
<li><a href="#" rel="Fruit and Vegetables">Banana</a></li>
<li><a href="#" rel="Fruit and Vegetables">Orange</a></li>
<li><a href="#" rel="Fruit and Vegetables">Cabbage</a></li>
</ul>
单击一个按钮,然后将列表排序为以下形式:
<ul id="list">
<li class="grouphead">Fruit and Vegetables</li>
<ul>
<li><a href="#" rel="Fruit and Vegetables">Banana</a></li>
<li><a href="#" rel="Fruit and Vegetables">Cabbage</a></li>
<li><a href="#" rel="Fruit and Vegetables">Orange</a></li>
</ul>
<li class="grouphead">Meat</li>
<ul>
<li><a href="#" rel="Meat">Beef</a></li>
<li><a href="#" rel="Meat">Lamb</a></li>
<li><a href="#" rel="Meat">Pork</a></li>
</ul>
</ul><!-- End: #list -->
最佳答案
var dict = {
}
//read items from list
$("#list li").each( function() {
var k = $(this).children(":first").attr('rel');
if ( dict.hasOwnProperty(k) == false ) {
dict[k] = [];
}
dict[k].push( $(this).html() );
} );
//clear old list items
$("#list").empty();
function newList(nam) {
var r = "";
for ( c in dict[nam] ) {
r += "<li>" + dict[nam][c] + "</li>";
}
return r;
}
//create new list
for ( nam in dict ) {
$("#list").append("<li class='grouphead'>" + nam + "</li>");
$("#list").append("<ul>" + newList(nam) + "</ul>");
}
http://jsfiddle.net/r5QQT/7/
关于javascript - 使用jQuery将列表按标题分组,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/21329651/