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.

Answer 1

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>

Answer 2

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>