Use jQuery to sort a list into groups with headings

Question

I have searched and tried hard to achieve this but completely stuck and hoping somebody on here can help. Basically I would like to be able to click on a button and use jQuery to sort an unordered list alphabetically by group heading and then each nested list alphabetically within each group. Many thanks in advance and here goes...

The default list:

<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>

Click a button and then sort the list to something like this:

<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 -->

I have set up a public fiddle as requested. Many thanks. jsfiddle.net/CpJZ8/2 — user3231326
– user3231326, Commented Jan 24, 2014 at 11:24

Steve Claridge · Accepted Answer · 2014-01-24 12:04:42Z

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/

Many many thanks Steve, this is fantastic. Your help is much appreciated.

Steve Claridge · Accepted Answer · 2014-01-24 10:43:00Z

I modified your HTML a little bit to make selection simpler in this answer:

<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="newone"> <li class="grouphead">Fruit and Vegetables</li> <ul id="Fruit"> </ul> <li class="grouphead">Meat</li> <ul id="Meat"> </ul> </ul> var dict = { "Meat" : [], "Fruit and Vegetables" : [] } $("#list li").each( function() { dict[$(this).children(":first").attr('rel')].push( $(this).html() ); } ); $.each( dict["Meat"], function(k, v) { $("#Meat").append( "<li>" + v + "</li>" ); }); $.each( dict["Fruit and Vegetables"], function(k, v) { $("#Fruit").append( "<li>" + v + "</li>" ); });

Here is it in a Fiddle: http://jsfiddle.net/r5QQT/1/

Many thanks for this Steve it is much appreciated but unfortunately the default list HTML will always be structured as in my original post. The hope was to create the group headings by using the rel attribute for each link. Also the rel attribute would be used as a reference to create the nested lists. Hope this makes sense.

Collectives™ on Stack Overflow

Use jQuery to sort a list into groups with headings

2 Answers 2

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Linked

Related