Easy Tutorial
❮ Css Search Bar Android Tutorial Sensor3 ❯

JavaScript/CSS List Sorting Feature

Category Programming Techniques

In this section, we will learn how to implement a list sorting feature using JS/CSS.

First, let's take a look at the effect, which is to click the button to sort:

Basic HTML Code

Example

<ul id="id01">
  <li>tutorialpro</li>
  <li>Google</li>
  <li>Taobao</li>
  <li>Zhihu</li>
  <li>Baidu</li>
  <li>Weibo</li>
</ul>

<script>
function sortList() {
  var list, i, switching, b, shouldSwitch;
  list = document.getElementById("id01");
  switching = true;
  /* Set a loop statement */
  while (switching) {
    // Set the loop end flag
    switching = false;
    b = list.getElementsByTagName("LI");
    // Loop through the list
    for (i = 0; i < (b.length - 1); i++) {
      // Set whether the element should switch positions
      shouldSwitch = false;
      /* Determine whether to switch the next element with the current element */
      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /* Compare the two elements in alphabetical order. If the next element is alphabetically less than the current element, set the switch element flag and end the current loop */
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* If the element switch position is set to true, then perform the swap operation */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}
</script>

Ascending or Descending Order

The first click on the button sorts in ascending order (A to Z).

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

First, let's take a look at the effect, which is to click the button to sort:

Example

<ul id="id01">
  <li>tutorialpro</li>
  <li>Google</li>
  <li>Taobao</li>
  <li>Zhihu</li>
  <li>Baidu</li>
  <li>Weibo</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 a loop statement
  while (switching) {
    // Set the loop end flag
    switching = false;
    b = list.getElementsByTagName("LI");
    // Loop through the list
    for (i = 0; i < (b.length - 1); i++) {
      // Set whether the element should switch positions
      shouldSwitch = false;
      /* Determine whether to switch the next element with the current element (asc or desc): */
      if (dir == "asc") {
        if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
          /* Compare the two elements in alphabetical order. If the next element is alphabetically less than the current element, set the switch element flag and end the current loop */
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
          /* Compare the two elements in alphabetical order. If the next element is alphabetically less than the current element, set the switch element flag and end the current loop */
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* If the element switch position is set to true, then perform the swap operation */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
      // Each time a swap is completed, increase switchcount by 1
      switchcount++;
    } else {
      /* If all elements are sorted and the direction is set to "asc", then set the direction to "desc" and execute the loop again */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

Numeric Sorting

Example

if (Number(b[i].innerHTML) > Number(b[i + 1].innerHTML)) {
  shouldSwitch = true;
  break;
}
❮ Css Search Bar Android Tutorial Sensor3 ❯