In this chapter, we will learn how to use JS/CSS to implement the list sorting function.

First look at the effect as follows, click the button to achieve sorting:

Basic HTML code

<ul id="id01">
  <li>TutorialFish</li>
  <li>Google</li>
  <li>Bing</li>
  <li>Yahoo</li>
  <li>Facebook</li>
  <li>LinkedIn</li>
</ul>
 
<script>
function sortList() {
  var list, i, switching, b, shouldSwitch;
  list = document.getElementById("id01");
  switching = true;
  /* Set up a loop statement */
  while (switching) {
    // Set the end of the loop mark
    switching = false;
    b = list.getElementsByTagName("LI");
    // loop list
    for (i = 0; i <(b.length-1); i++) {
      // Set whether the element changes position
      shouldSwitch = false;
      /* Determine whether to switch the next element with the current element */
      if (b[i].innerHTML.toLowerCase()> b[i + 1].innerHTML.toLowerCase()) {
        /* The two elements are compared in alphabetical order. If the letter of the next element is smaller than the current element, set the exchange element mark and end the current loop */
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* If the element swap position is set to true, perform the swap operation */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}
</script>

 Try It! 

Sort in ascending or descending order

When you click the button for the first time, the sort direction is ascending (A to Z).

Click again, the sorting direction is descending (Z to A).

First look at the effect as follows, click the button to achieve sorting:


Example

<ul id="id01">
  <li>TutorialFish</li>
  <li>Google</li>
  <li>Bing</li>
  <li>Yahoo</li>
  <li>Facebook</li>
  <li>LinkedIn</li>
</ul>
 
<script>
function sortListDir() {
  var list, i, switching, b, shouldSwitch, dir, switchcount = 0;
  list = document.getElementById("id01");
  switching = true;
  // set ascending order
  dir = "asc";
  // Set up a loop statement
  while (switching) {
    // Set the end of the loop mark
    switching = false;
    b = list.getElementsByTagName("LI");
    // loop list
    for (i = 0; i <(b.length-1); i++) {
      // Set whether the element changes position
      shouldSwitch = false;
      /* Determine whether to switch between the next element and the current element (asc or desc): */
      if (dir == "asc") {
        if (b[i].innerHTML.toLowerCase()> b[i + 1].innerHTML.toLowerCase()) {
          /*The two elements are compared in alphabetical order. If the letter of the next element is smaller than the current element, set the exchange element mark and end the current loop */
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (b[i].innerHTML.toLowerCase() <b[i + 1].innerHTML.toLowerCase()) {
          /* The two elements are compared in alphabetical order. If the letter of the next element is smaller than the current element, set the exchange element mark and end the current loop */
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* If the element swap position is set to true, perform the swap operation */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
      // Every time the swap is completed, increase the switchcount by 1
      switchcount ++;
    } else {
      /* If all elements are sorted and the direction is set to "asc", then the direction is set to "desc" and the loop is executed again */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

 Try It! 

Number sort

if (Number(b[i].innerHTML)> Number(b[i + 1].innerHTML)) {

   shouldSwitch = true;

   break;

}

 Try It!