我进行了搜索并努力实现这一目标,但完全陷于困境,希望有人能为您提供帮助。基本上,我希望能够单击一个按钮并使用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/

10-12 12:40
查看更多