js實現列表按字母排序
阿新 • • 發佈:2020-08-12
本文例項為大家分享了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; } } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。