How can I sort an unordered list by the list items' ids with vanilla JavaScript?

How can I sort an unordered list by the list items' ids with vanilla JavaScript?

Problem Description:

I have a list of meeting days, e.g. Monday morning, Monday afternoon, Monday evening, Tuesday morning and so on which are then displayed on a website’s front end as an unordered list.
Because the text is not alphabetical I want to sort the items using IDs I have created for each based on their item aliases with an added prefix. E.g. the "monday-morning" alias is now "aa-monday-morning" and that in turn is used to create id="aa-monday-morning"
Each of the list items has the class "sort" and sits in a ul with the id "meetings".
[I do realise that if they’d been set up in the correct order in the first place, I wouldn’t have a problem, but it’s too late, now as there are 100+ items tagged with those list items].

I understand that I need to select all the items with the class name "sort" and then convert them to an array before sorting them by their ids, but I am really struggling.

I started with some code I copied from somewhere but it doesn’t seem to do anything and I’m not sure why.

let List = document.getElementById("meetings");
let listItems = List.getElementsByClassName('sort');
    sortList = Array.prototype.slice.call(listItems);
    if(listItems && listItems.length){
        listItems.sort(sortList);
        while (List.hasChildNodes()) {
            List.removeChild(List.lastChild);
        }
        while(listItems.length){
            var newList = listItems.shift();
            List.appendChild(newList);
        }
    }
function sortList(a, b){
    var aid = (a.id);
    var bid = (b.id);
    return aid - bid;
}
<ul id="meetings" class="sidebar">
<li id="aa-monday-morning" class="sort">Monday morning</li>
<li id="ba-tuesday-morning" class="sort">Tuesday morning</li>
<li id="bc-tuesday-evening" class="sort">Tuesday evening</li>
<li id="cc-wednesday-evening" class="sort">Wednesday evening</li>
<li id="dc-thursday-evening" class="sort">Thursday evening</li>
<li id="fb-friday-afternoon" class="sort">Friday afternoon</li>
<li id="ca-wednesday-morning" class="sort">Wednesday morning</li>
<li id="bb-tuesday-afternoon" class="sort">Tuesday afternoon</li>
<li id="cb-wednesday-afternoon" class="sort">Wednesday afternoon</li>
<li id="ac-monday-evening" class="sort">Monday evening</li>
<li id="ab-monday-afternoon" class="sort">Monday afternoon</li>
</ul>

The end result should be:

    <ul id="meetings" class="sidebar">
    <li id="aa-monday-morning" class="sort">Monday morning</li>
    <li id="ab-monday-afternoon" class="sort">Monday afternoon</li>
    <li id="ac-monday-evening" class="sort">Monday evening</li>
    <li id="ba-tuesday-morning" class="sort">Tuesday morning</li>
    <li id="bb-tuesday-afternoon" class="sort">Tuesday afternoon</li>
    <li id="bc-tuesday-evening" class="sort">Tuesday evening</li>
    <li id="ca-wednesday-morning" class="sort">Wednesday morning</li>
    <li id="cb-wednesday-afternoon" class="sort">Wednesday afternoon</li>
    <li id="cc-wednesday-evening" class="sort">Wednesday evening</li>
    <li id="dc-thursday-evening" class="sort">Thursday evening</li>
    <li id="fb-friday-afternoon" class="sort">Friday afternoon</li>
    </ul>

Thank you for reading.

Solution – 1

You can use the following approach:

```
function sortById(){
  const result=document.getElementsByClassName("sort");
  let arr=[];
  for(const item of result){
       arr.push(item.id)
  }

  let sortedArr=arr.sort((a,b)=>a>b);
  return sortedArr;
}
```

Solution – 2

You can create a variable for the parent element of the list items listElement and another that holds an array of the list items listItemElements.

Sort the array according to your criteria: read about the compare callback function argument that is provided to array.sort().

Finally, (re-)insert the list item elements into the parent element in the new, sorted order.

Here’s a complete code example:

const listElement = document.getElementById('meetings');

const listItemElements = [...listElement.querySelectorAll(':scope > li.sort')];

listItemElements.sort(({id: a}, {id: b}) => a < b ? -1 : a > b ? 1 : 0);

for (const li of listItemElements) listElement.appendChild(li);
<ul id="meetings" class="sidebar">
<li id="aa-monday-morning" class="sort">Monday morning</li>
<li id="ba-tuesday-morning" class="sort">Tuesday morning</li>
<li id="bc-tuesday-evening" class="sort">Tuesday evening</li>
<li id="cc-wednesday-evening" class="sort">Wednesday evening</li>
<li id="dc-thursday-evening" class="sort">Thursday evening</li>
<li id="fb-friday-afternoon" class="sort">Friday afternoon</li>
<li id="ca-wednesday-morning" class="sort">Wednesday morning</li>
<li id="bb-tuesday-afternoon" class="sort">Tuesday afternoon</li>
<li id="cb-wednesday-afternoon" class="sort">Wednesday afternoon</li>
<li id="ac-monday-evening" class="sort">Monday evening</li>
<li id="ab-monday-afternoon" class="sort">Monday afternoon</li>
</ul>
Rate this post
We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
Accept
Reject