Làm thế nào để - Sắp xếp một danh sách
Tìm hiểu cách sắp xếp danh sách HTML bằng JavaScript.
Nhấp vào nút để sắp xếp danh sách theo thứ tự bảng chữ cái:
- Oslo
- X-tốc-khôm
- Helsinki
- Berlin
- la Mã
- Madrid
Tạo một chức năng sắp xếp
Thí dụ
<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>
Sắp xếp Tăng dần và Giảm dần
Lần đầu tiên bạn nhấp vào nút, hướng sắp xếp tăng dần (A đến Z).
Nhấp lại và hướng sắp xếp sẽ giảm dần (Z đến A):
- Oslo
- X-tốc-khôm
- Helsinki
- Berlin
- la Mã
- Madrid
Thí dụ
<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>
Sắp xếp danh sách theo số
Thí dụ
if (Number(b[i].innerHTML) > Number(b[i + 1].innerHTML)) {
shouldSwitch = true;
break;
}