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
– Twisty, Commented Jul 17, 2020 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
– Eoin, Commented Jul 17, 2020 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
– Twisty, Commented Jul 17, 2020 at 22:15

charlietfl · Accepted Answer · 2020-07-17 22:16:34Z

2

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>

edited Jul 17, 2020 at 22:16

answered Jul 17, 2020 at 22:09

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Twisty · Accepted Answer · 2020-07-17 22:09:05Z

0

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>

answered Jul 17, 2020 at 22:09

Twisty

31k2 gold badges30 silver badges50 bronze badges

4 Comments

Eoin Over a year ago

Surely i will try this.

charlietfl Over a year ago

Why create new elements and not just sort the existing ones?

Twisty Over a year ago

@charlietfl what like this: stackoverflow.com/questions/1134976/…

charlietfl Over a year ago

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)

Collectives™ on Stack Overflow

Sort multiple lists based on selected options using JQuery

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related