本文实例为大家分享了js实现列表按字母排序的具体代码，供大家参考，具体内容如下
知识点
1.parentNode：返回元素父节点的属性
2.insertBefore()方法
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法:node.insertBefore(newnode,existingnode)
newnode 节点对象 必须。要插入的节点对象
existingnode 节点对象 必须。要添加新的节点前的子节点。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表按字母排序</title>
</head>
<body>
<p>点击按钮按字母排序列表</p>
<button onclick="sortList()">排序</button>
<ul id="UL">
<li>Oslo</li>
<li>Stockholm</li>
<li>Helsinki</li>
<li>Berlin</li>
<li>Rome</li>
<li>Madrid</li>
</ul>
<script src="../js/列表按字母排序.js">
</script>
</body>
</html>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
function sortList() {
var list=document.getElementById("UL");
var switching=true;
/*做一个循环*/
while (switching){
//不切换
switching=false;
var li=list.getElementsByTagName("li");
//遍历所有的列表
for(var i=0;i<(li.length-1);i++){
switching=false;
//检查下一项是否应该和当前项换位置
if (li[i].innerHTML.toLowerCase() > li[i + 1].innerHTML.toLowerCase()) {
switching=true;
break;
}
}
//位置互换
if(switching){
li[i].parentNode.insertBefore(li[i+1],li[i]);
switching=true;
}
}
}
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/weixin_45596380/article/details/105954993