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>
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>
Number sort
if (Number(b[i].innerHTML)> Number(b[i + 1].innerHTML)) {
shouldSwitch = true;
break;
}