In this chapter, we will learn how to use JS/CSS to implementlist sortingfunction.
First look at the effect below, click the button to sort:
Basic HTML Code
Example
<ul id="id01">
<li>Example</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 to swap element positions
shouldSwitch = false;
/*Determine whether to swap the next element with the current element*/
if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
/*Compare the two elements alphabetically. If the next element's letters are smaller than the current element, set the swap flag and end the current loop*/
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
/*If the element swap flag is set to true, perform the swap operation*/
b[i].parentNode.insertBefore(b[i + 1], b[i]);
switching = true;
}
}
}
</script>
Try it Yourself »
Ascending or Descending Sort
When the button is clicked for the first time, the sort direction is ascending (A to Z).
Click again, and the sort direction is descending (Z to A).
First look at the effect below, click the button to sort:
Example
<ul id="id01">
<li>Example</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 sort
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 to swap element positions
shouldSwitch = false;
/*Determine whether to swap 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 alphabetically. If the next element's letters are smaller than the current element, set the swap 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 alphabetically. If the next element's letters are smaller than the current element, set the swap flag and end the current loop*/
shouldSwitch= true;
break;
}
}
}
if (shouldSwitch) {
/*If the element swap flag is set to true, perform the swap operation*/
b[i].parentNode.insertBefore(b[i + 1], b[i]);
switching = true;
//Each time a swap is completed, increment switchcount by 1
switchcount ++;
} else {
/*If all elements are sorted and direction is set to "asc", set direction to "desc" and run the loop again*/
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
</script>
Try it Yourself »
Number Sorting
Example
if (Number(b[i].innerHTML) > Number(b[i + 1].innerHTML)) {
shouldSwitch = true;
break;
}
Try it Yourself »