当前位置 博文首页 > js实现列表按字母排序

    js实现列表按字母排序

    作者:星辰落海 时间:2021-09-07 18:54

    本文实例为大家分享了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 >
     <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;
      }
     }
    }
    jsjbwy
    下一篇:没有了