How TO - Sort a List
Learn how to sort an HTML list, using JavaScript.
Click the button to sort the list alphabetically:
- Oslo
- Stockholm
- Helsinki
- Berlin
- Rome
- Madrid
Creating a Sort 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;
/* Make
a loop that will continue until
no switching has been done: */
while (switching) {
// Start by saying: no switching is
done:
switching = false;
b =
list.getElementsByTagName("LI");
// Loop through all
list items:
for (i = 0; i < (b.length - 1); i++) {
// Start by saying there should be no switching:
shouldSwitch = false;
/* Check if the next
item should
switch place with the current
item: */
if (b[i].innerHTML.toLowerCase() >
b[i + 1].innerHTML.toLowerCase()) {
/* If next item is alphabetically lower than current item,
mark as a switch and break the loop: */
shouldSwitch= true;
break;
}
}
if (shouldSwitch) {
/* If a switch has been marked, make the switch
and mark the switch as done: */
b[i].parentNode.insertBefore(b[i + 1], b[i]);
switching = true;
}
}
}
</script>
Try it Yourself »
Sorting Ascending and Descending
The first time you click the button, the sorting direction is ascending (A to Z).
Click again, and the sorting direction will be descending (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;
// Set
the sorting direction to ascending:
dir = "asc";
// Make a
loop that will continue until no switching has been done:
while
(switching) {
// Start by saying: no switching is done:
switching = false;
b = list.getElementsByTagName("LI");
// Loop through all list-items:
for (i = 0; i < (b.length
- 1); i++) {
// Start by saying there should
be no switching:
shouldSwitch = false;
/* Check if the next item should switch place with the current item,
based on the sorting direction (asc or desc): */
if (dir == "asc") {
if (b[i].innerHTML.toLowerCase()
> b[i + 1].innerHTML.toLowerCase()) {
/* If next item is alphabetically lower than current item,
mark as a switch and break the loop: */
shouldSwitch= true;
break;
}
} else if (dir == "desc") {
if
(b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
/* If next item is alphabetically higher than current item,
mark as a switch and break the loop: */
shouldSwitch= true;
break;
}
}
}
if (shouldSwitch) {
/* If a switch has been marked, make the switch
and mark that a switch has been done: */
b[i].parentNode.insertBefore(b[i + 1], b[i]);
switching = true;
// Each time a switch is
done, increase switchcount by 1:
switchcount
++;
} else {
/* If no
switching has been done AND the direction is "asc",
set the direction to "desc" and run the while loop again. */
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
</script>
Try it Yourself »
