如何 - 对列表进行排序
学习如何使用 JavaScript 对 HTML 列表进行排序。
点击按钮以按字母顺序对列表进行排序
- 奥斯陆
- 斯德哥尔摩
- 赫尔辛基
- 柏林
- 罗马
- 马德里
创建排序函数
示例
<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;
/* 创建一个循环，直到
没有完成交换：*/
while (switching) {
// 从说“没有完成交换”开始
switching = false;
b = list.getElementsByTagName("LI");
// 循环遍历所有列表项
for (i = 0; i < (b.length - 1); i++) {
// 从说“不应有交换”开始
shouldSwitch = false;
/* 检查下一项是否应该
与当前项交换位置：*/
if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
/* 如果下一项在字母顺序上比当前项低，
标记为交换并中断循环：*/
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
/* 如果标记了交换，则进行交换
并标记交换已完成：*/
b[i].parentNode.insertBefore(b[i + 1], b[i]);
switching = true;
}
}
}
</script>
自己试试 »
升序和降序排序
第一次点击按钮时，排序方向为升序（A 到 Z）。
再次点击，排序方向将为降序（Z 到 A）
- 奥斯陆
- 斯德哥尔摩
- 赫尔辛基
- 柏林
- 罗马
- 马德里
示例
<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;
// 将排序方向设置为升序
dir = "asc";
// 创建一个循环，直到没有完成交换
while (switching) {
// 从说“没有完成交换”开始
switching = false;
b = list.getElementsByTagName("LI");
// 循环遍历所有列表项
for (i = 0; i < (b.length - 1); i++) {
// 从说“不应有交换”开始
shouldSwitch = false;
/* 检查下一项是否应该与当前项交换位置，
基于排序方向（asc 或 desc）：*/
if (dir == "asc") {
if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
/* 如果下一项在字母顺序上比当前项低，
标记为交换并中断循环：*/
shouldSwitch = true;
break;
}
} else if (dir == "desc") {
if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
/* 如果下一项在字母顺序上比当前项高，
标记为交换并中断循环：*/
shouldSwitch= true;
break;
}
}
}
if (shouldSwitch) {
/* 如果标记了交换，则进行交换
并标记交换已完成：*/
b[i].parentNode.insertBefore(b[i + 1], b[i]);
switching = true;
// 每次完成交换时，将 switchcount 增加 1
switchcount ++;
} else {
/* 如果没有完成交换并且方向为“asc”，
将方向设置为“desc”并再次运行 while 循环。 */
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}
</script>
自己试试 »
