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

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

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

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

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>

uj5u.com熱心網友回復：

你實際上并沒有呼叫 sort()

使用擴展和帶有排序功能的普通排序，您可以顯著縮短排序

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>

uj5u.com熱心網友回復：

也許這是我的 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 習慣）

標籤：

上一篇：如何按其組件維度之一對專案串列進行排序

下一篇：c#如何在包含物件的陣列中找到最大值