如何在頁面加載時使用 javascript 按字母順序對 html 列表進行排序

Question

我的頁面上有一個無序列表。 我將不斷地向它添加更多名稱，因此我希望列表在頁面加載時按字母順序排序。

這是我到目前為止所做的，但它不起作用。

這里有什么問題，我怎樣才能讓這個腳本按字母順序對列表進行排序？

 function sort() { // Declaring Variables var MY_list, i, run, li, stop; // Taking content of list as input MY_list = document.getElementById("MYList"); run = true; while (run) { run = false; li = MY_list.getElementsByTagName("LI"); // Loop traversing through all the list items for (i = 0; i < (li.length - 1); i++) { stop = false; if (li[i].innerHTML.toLowerCase() > li[i + 1].innerHTML.toLowerCase()) { stop = true; break; } } /* If the current item is smaller than the next item then adding it after it using insertBefore() method */ if (stop) { li[i].parentNode.insertBefore( li[i + 1], li[i]); run = true; } } } sort()

 <div style="text-align: left;"> <title> Sort a list alphabetically Using JavaScript </title> <h2 style="text-align: center;"> On pageload,&nbsp; sort the below list </h2> <ul style="color: crimson; list-style-type: none; list-style-image: none; list-style-position: outside;" id="MYList"> <li>Fish</li> <li>Cat</li> <li>Animal</li> <li>Dog</li> <li>Bird</li> <li>Eagle</li> <li>Home</li> </ul> </div> <hr/> <div style="text-align: center;"> <div style="text-align: center;"> <dl> <dt><big><big><big><a style="text-decoration: none;" href="A-LIST.html">A</a> <a style="text-decoration: none;" href="B-LIST.html">B</a> <a style="text-decoration: none;" href="C-LIST.html">C</a> <a style="text-decoration: none;" href="D-LIST.html">D</a> <a style="text-decoration: none;" href="E-LIST.html">E</a> <a style="text-decoration: none;" href="F-LIST.html">F</a> <a style="text-decoration: none;" href="G-LIST.html">G</a> <a style="text-decoration: none;" href="H-LIST.html">H</a> <a style="text-decoration: none;" href="I-LIST.html">I</a> <a style="text-decoration: none;" href="J-LIST.html">J</a> <a style="text-decoration: none;" href="K-LIST.html">K</a> <a style="text-decoration: none;" href="L-LIST.html">L</a> <a style="text-decoration: none;" href="M-LIST.html">M</a> <a style="text-decoration: none;" href="N-LIST.html">N</a> <a style="text-decoration: none;" href="O-LIST.html">O</a> <a style="text-decoration: none;" href="P-LIST.html">P</a> <a style="text-decoration: none;" href="Q-LIST.html">Q</a> <a style="text-decoration: none;" href="R-LIST.html">R</a> <a style="text-decoration: none;" href="S-LIST.html">S</a> <a style="text-decoration: none;" href="T-LIST.html">T</a> <a style="text-decoration: none;" href="U-LIST.html">U</a> <a style="text-decoration: none;" href="V-LIST.html">V</a> <a style="text-decoration: none;" href="W-LIST.html">W</a> <a style="text-decoration: none;" href="X-LIST.html">X</a> <a style="text-decoration: none;" href="Y-LIST.html">Y</a> <a style="text-decoration: none;" href="Z-LIST.html">Z</a></big></big></big></dt> </dl> </div> </div>

Answer 1

你實際上並沒有調用sort()

使用傳播和普通排序與排序 function 可以顯着縮短排序

 const sortList = list => [...list].sort((a, b) => { const A = a.textContent, B = b.textContent; return (A < B)? -1: (A > B)? 1: 0; }); window.addEventListener("load", function() { const ul = document.getElementById("MYList"); const list = ul.querySelectorAll("li"); ul.append(...sortList(list)); })

 h2 { text-align: center; } #MYList { color: crimson; list-style-type: none; list-style-image: none; list-style-position: outside; }

 <div> <title> Sort a list alphabetically Using JavaScript </title> <h2> On pageload,&nbsp; sort the below list </h2> <ul id="MYList"> <li>Fish</li> <li>Cat</li> <li>Animal</li> <li>Dog</li> <li>Bird</li> <li>Eagle</li> <li>Home</li> </ul> </div>

Answer 2

也許這是我的 Angular 方法，但我會這樣做：

1. 閱讀您的列表並將所有名稱存儲在一個數組中
2. 清除 HTML 列表
3. 對 JS 列表進行排序
4. 從排序后的數組重建列表

 let names = []; const elems = document.getElementsByTagName("li"); for(let elem of elems){ names.push(elem.innerHTML); } MYList.innerHTML=""; names.sort(); for(let name of names){ MYList.innerHTML += `<li>${name}</li>` }

 <ul id="MYList"> <li>Fish</li> <li>Cat</li> <li>Animal</li> <li>Dog</li> <li>Bird</li> <li>Eagle</li> <li>Home</li> </ul>

當然，更聰明的方法是不要讓列表已經硬編碼在 HTML 中，而是存儲在 JS 中的數組中，並使用這個數組來構建您的視圖（同樣，Angular 習慣）