您的位置：首页 > Web前端 > JavaScript

js实现列表按字母排序

2020-08-18 04:09 1501 查看

本文实例为大家分享了js实现列表按字母排序的具体代码，供大家参考，具体内容如下

知识点

1.parentNode：返回元素父节点的属性
2.insertBefore()方法
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
语法:node.insertBefore(newnode,existingnode)
newnode 节点对象必须。要插入的节点对象
existingnode 节点对象必须。要添加新的节点前的子节点。

<!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>

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;
}
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助

您可能感兴趣的文章:

javascript select列表内容按字母倒序排序与按列表倒序排列

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 列表排序

相关文章推荐

新的分享

章节导航