How can I sort html ul li base on its value priorities

Question

Don't have any idea how to sort the list of items based on the three priorities.

I have an existing below list of items. I have successfully sorted them in alphabetical order using a data-title attribute. Now I want also to sort them into priorities if the user wants to. The priorities are 1. driving 2. idle 3. stop. So I just use value as my data. Any idea how can I achieve this priority sorting?

<ul id='myUl'>
<li class='myLi' data-title='ERE-8792' value='idle'>ERE-8792</li> 
<li class='myLi' data-title='ABA-1102' value='stop'>ABA-1102</li> 
<li class='myLi' data-title='VDW-5486' value='stop'>VDW-5486</li> 
<li class='myLi' data-title='DRF-5896' value='driving'>DRF-5896</li> 
</ul>

The result should be:

• DRF-5896
• ERE-8792
• ABA-1102
• VDW-5486

Answer 1

Just so you know, there isn't a 'value' attribute to li elements. You could make one up I guess, using 'data-value' and in the code below I do just that. In any rate, if your sorting order is driving, idle, stop and you know that, you could do something like this

let ul = document.getElementById("myUl");
let liElements = ul.getElementsByClassName("myLi");

let sortedLiElements = Array.from(liElements).sort((a, b) => {
  let aVal = a.getAttribute("data-value");
  let bVal = b.getAttribute("data-value");

  if (aVal === "driving") return -1;
  if (bVal === "driving") return 1;
  if (aVal === "idle") return -1;
  if (bVal === "idle") return 1;
  return 0;
});

ul.innerHTML = "";
for (let i = 0; i < sortedLiElements.length; i++) {
  ul.appendChild(sortedLiElements[i]);
}