Sort multiple lists based on selected options using JQuery

Question

HTML Code

<Select id="alphalist">
   <option value="a">A</option>
   <option value="b">B</option>
   <option value="c">C</option>
</Select>
 
<div id="a" class="lists" style="display"> 
  <ul id="alist"> 
      <li>Axe</li> 
      <li>Arc</li> 
      <li>Apple</li>
  </ul>  
</div>

<div id="b" class="lists" style="display:none"> 
  <ul id="blist"> 
      <li>Bat</li> 
      <li>Boat</li> 
      <li>Bee</li>
  </ul>
</div>

<div id="c" class="lists" style="display:none"> 
  <ul id="clist"> 
      <li>Cat</li> 
      <li>Coat</li> 
      <li>Clock</li>  
  </ul> 
</div>

Script Code

$(function() 
{
 $('#alphalist').change(function(){
 $('.lists').hide();
 $('#' + $(this).val()).show();
 });
});

Here I created 3 lists and a dropdown menu with options A,B and C. By default option A is selected and only the first list is displayed. Same way on clicking option B only second list is displayed and only third list is displayed when selecting option C. Now I need to sort each list in alphabetical order and display the sorted list corresponding to selected option.

Script code for sorting is:

var mylist = $('#alist');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });

The above code sort only the first list. For sorting second list we need to write same above code again by replacing $('#alist) with $('#blist). So if we have, lets say, 20+ lists, how can we modify the above code so that we can sort all the available lists. If class name is common between all the lists, how sorting can be done? Please help me.

Why not sort it as the page is created instead of sorting it when it is revealed. — Twisty, Jul 17 '20 at 21:58
I'm recently working on a lyrics and chords website in which song names have to be added to the list. So placing a new song name into a big list is difficult. — Eoin, Jul 17 '20 at 22:08
This is where a ServerSide scripting language and a Database become really helpful. You can store the songs in the DB, in any order you like, and let the Query place them in the correct order, or sort them after pulling them from the DB. If you're writing the HTML yourself, the answer I provided will help. — Twisty, Jul 17 '20 at 22:15

charlietfl · Accepted Answer · 2020-07-17T22:16:34.620

Just loop over all the lists and sort each instance. This can be done once when page loads.

Here I'm using html(function) to do the looping and returning the sorted children of each instance

// sort lists on page load
$('.lists ul').html(function(){
  return $(this).children().sort((a,b) => $(a).text().localeCompare($(b).text()));
});

// add the change listener for select

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="a" class="lists"> 
  <ul id="alist"> 
      <li>Axe</li> 
      <li>Arc</li> 
      <li>Apple</li>
  </ul>  
</div>

<div id="b" class="lists" > 
  <ul id="blist"> 
      <li>Bat</li> 
      <li>Boat</li> 
      <li>Bee</li>
  </ul>
</div>

<div id="c" class="lists" > 
  <ul id="clist"> 
      <li>Cat</li> 
      <li>Coat</li> 
      <li>Clock</li>  
  </ul> 
</div>

score 0 · Answer 2 · answered Jul 17 '20 at 22:09

It is often easier to sort an Array. You can sort object with a function, yet this example may be easier to just capture the Text, Sort it, and rebuild the list.

$(function() {
  function sortList(obj) {
    var arr = [];
    var list = $("ul", obj);
    $("li", list).each(function(i, el) {
      arr.push($(el).text().trim());
    });
    arr.sort();
    $(list).html("");
    $.each(arr, function(k, v) {
      $("<li>").html(v).appendTo(list);
    });
  }

  function showList(obj) {
    $(".lists").hide();
    obj.show();
  }

  $("#alphalist").change(function() {
    var t = $("#" + $(this).val());
    sortList(t);
    showList(t);
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<Select id="alphalist">
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</Select>

<div id="a" class="lists">
  <ul id="alist">
    <li>Axe</li>
    <li>Arc</li>
    <li>Apple</li>
  </ul>
</div>

<div id="b" class="lists" style="display:none">
  <ul id="blist">
    <li>Bat</li>
    <li>Boat</li>
    <li>Bee</li>
  </ul>
</div>

<div id="c" class="lists" style="display:none">
  <ul id="clist">
    <li>Cat</li>
    <li>Coat</li>
    <li>Clock</li>
  </ul>
</div>

Why create new elements and not just sort the existing ones? — charlietfl, Jul 17 '20 at 22:19
@charlietfl what like this: https://stackoverflow.com/questions/1134976/how-may-i-sort-a-list-alphabetically-using-jquery — Twisty, Jul 17 '20 at 22:23
Can use `sort()` on jQuery collection the way I did it in my solution. That example is a bit old. For a nodeList collection can use `Array.from(collection).sort(sortfunc)` — charlietfl, Jul 17 '20 at 22:26

Sort multiple lists based on selected options using JQuery

2 Answers2