How to sort a list

Create sorting function

Example

<ul id="id01">
  <li>Oslo</li>
  <li>Stockholm</li>
  <li>Helsinki</li>
  <li>Berlin</li>
  <li>Rome</li>
  <li>Madrid</li>
</ul>
<script>
function sortList() {
  var list, i, switching, b, shouldSwitch;
  list = document.getElementById("id01");
  switching = true;
  /* Create a loop that will continue until there are no items to be swapped: */
  /* Declare first: There are no items to swap currently: */
    // First declare: there is no item to be swapped
    b = list.getElementsByTagName("LI");
    /* Traverse all list items: */
    for (i = 0; i < (b.length - 1); i++) {
    /* Declare first: The current item and the next item should not be swapped: */
      // First declare: the current item and the next item should not be swapped
      /* Check if the next item should be swapped with the current item based on the sorting direction (ascending or descending): */
      /* Check if the next item should be swapped with the current item: */
      /* If the alphabetical order of the next item is before the current item, mark it for swap and break out of the current loop: */
        shouldSwitch = true;
        else if (dir == "desc") {
        break;
      }
    }
    if (shouldSwitch) {
      /* If marked for swap, perform the swap operation and mark as swapped: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}
</script>

Try It Yourself

Ascending and descending sort

When the button is clicked for the first time, the sort order is ascending (A to Z).

Click again to sort in descending order (Z to A):

• Oslo
• Stockholm
• Helsinki
• Berlin
• Rome
• Madrid

Example

<ul id="id01">
  <li>Oslo</li>
  <li>Stockholm</li>
  <li>Helsinki</li>
  <li>Berlin</li>
  <li>Rome</li>
  <li>Madrid</li>
</ul>
<script>
function sortListDir() {
  var list, i, switching, b, shouldSwitch, dir, switchcount = 0;
  list = document.getElementById("id01");
  switching = true;
  dir = "asc"; 
  /* Create a loop that will continue until there are no items to swap: */
  while (switching) {
  /* Declare first: There are no items to swap currently: */
    switching = false;
    b = list.getElementsByTagName("LI");
    /* Traverse all list items: */
    for (i = 0; i < (b.length - 1); i++) {
    /* Declare first: The current item and the next item should not be swapped: */
      shouldSwitch = false;
      /* Check if the next item should be swapped with the current item based on the sorting direction (ascending or descending): */
      if (dir == "asc") {
      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /* If the alphabetical order of the next item is before the current item, mark it for swap and break out of the current loop: */
          shouldSwitch = true;
          else if (dir == "desc") {
          break;
        }
      }
        if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
          /* If the alphabetical order of the next item is after the current item, mark it for swap and break out of the current loop: */
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* If marked for swap, perform the swap operation and mark as swapped: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
      // Increment switchcount each time a swap is made:
      switchcount ++;
    }
      /* If no swaps have been made and the direction is "ascending", set the direction to "descending" and run the while loop again. */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

Try It Yourself

Sort the list by number

Example

if (Number(b[i].innerHTML) > Number(b[i + 1].innerHTML)) {
  shouldSwitch = true;
  break;
}

Try It Yourself