如何 - 排序列表
瞭解如何使用 JavaScript 對 HTML 列表進行排序。
單擊按鈕以按字母順序對列表進行排序
- 奧斯陸
- 斯德哥爾摩
- Helsinki
- Berlin
- 羅馬
- Madrid
建立排序函式
示例
<ul id="id01">
<li>奧斯陸</li>
<li>斯德哥爾摩</li>
<li>赫爾辛基</li>
<li>柏林</li>
<li>羅馬</li>
<li>馬德里</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>
自己動手試一試 »
升序和降序排序
第一次點選按鈕時，排序方向為升序（A到Z）。
再次點選，排序方向將變為降序（Z到A）
- 奧斯陸
- 斯德哥爾摩
- Helsinki
- Berlin
- 羅馬
- Madrid
示例
<ul id="id01">
<li>奧斯陸</li>
<li>斯德哥爾摩</li>
<li>赫爾辛基</li>
<li>柏林</li>
<li>羅馬</li>
<li>馬德里</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>
自己動手試一試 »
按數字排序列表
示例
if (Number(b[i].innerHTML) > Number(b[i + 1].innerHTML)) {
shouldSwitch = true;
break;
}
自己動手試一試 »
