如何在页面加载时使用 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()

使用展开和带有排序功能的普通排序可以大大缩短排序

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 习惯）