js小测验-实现列表按字母排序

最新推荐文章于 2023-07-07 23:30:18 发布

星辰落海

最新推荐文章于 2023-07-07 23:30:18 发布

阅读量437

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45596380/article/details/105954993

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

知识点
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;
        }
    }
}

星辰落海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js小测验-实现列表按字母排序

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

扫一扫