按字母顺序排序 <li> 元素答案

【问题标题】：sorting <li> elements alphabetically按字母顺序排序 <li> 元素
【发布时间】：2017-03-11 00:26:10
【问题描述】：

如何在保留外部 html 的同时按字母顺序对无序列表进行排序？我当前的设置按字母顺序对列表进行排序，但是它只重新排列列表元素的内部 html 而不是整个元素，这是一个问题，因为在标记中我有特定于每个元素的基于事件的脚本调用。列表元素本身是由 xml 文档中的脚本添加的。这是html：

var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    onLoad(this);
  }
};
xhttp.open("GET", "stocks.xml", true);
xhttp.send();


function onLoad(xml) {
  var x, i, txt, xmlDoc;
  xmlDoc = xml.responseXML;
  txt = "<ul id = stocksymbols>";
  var StockList;
  x = xmlDoc.getElementsByTagName("Stock");

  for (i = 0; i < x.length; i++) {
    symbol = x[i].getAttribute('symbol');
    txt += "<li onmouseover=\"mouseOver('" + symbol + "')\" onmouseout=\"mouseOut()\">" + symbol + "</li>";
  }
  document.getElementById("stockList").innerHTML = txt + "</ul>";
  sortList("stocksymbols");
}

function sortList(ul) {
  if (typeof ul == "string")
    ul = document.getElementById(ul);

  var lis = ul.getElementsByTagName("LI");
  var vals = [];
  for (var i = 0, l = lis.length; i < l; i++)
    vals.push(lis[i].innerHTML);
  vals.sort();
  for (var i = 0, l = lis.length; i < l; i++)
    lis[i].innerHTML = vals[i];
}

function mouseOver(target) {
  stockInfoDiv = document.getElementById("stockInfo");
  stockInfoDiv.innerHTML = target;
}

function mouseOut() {
  stockInfoDiv.innerHTML = "";
}

h2 {
  color: Navy;
}

li {
  font-family: monospace;
  font-weight: bold;
  color: Navy;
}

li:hover {
  font-family: monospace;
  font-weight: bold;
  color: red;
}

<html>

<head>
  <title></title>

</head>

<body>
  <h2>List of Stocks:</h2>

  <div id="stockList">
  </div>

  <br />
  <br />
  <br />

  <div id="stockInfo">
  </div>
</body>

</html>

【问题讨论】：

为什么你不只是在列出清单之前对其进行排序？对数组进行排序，而不是构建列表。
因为我试图这样做大约一个小时但无法让它工作。然后找到了这个排序功能，并想我会这样尝试。

标签： javascript jquery html xml sorting

【解决方案1】：

而不是lis[i].innerHTML = vals[i];，对lis 列表进行排序并执行ul.appendChild(lis[i])。这会将当前的li 从其在 DOM 中的位置移除，并将其附加到ul 的末尾。我假设唯一的 li 元素是 ul 的直接子元素。

function sortList(ul) {
  var ul = document.getElementById(ul);

  Array.from(ul.getElementsByTagName("LI"))
    .sort((a, b) => a.textContent.localeCompare(b.textContent))
    .forEach(li => ul.appendChild(li));
}

sortList("stocksymbols");

<ul id=stocksymbols>
  <li>AAA</li>
  <li>ZZZ</li>
  <li>MMM</li>
  <li>BBB</li>
</ul>

【讨论】：

【解决方案2】：

<ul id="mylist">
    <li id="list-item3">text 3</li>
    <li id="list-item4">text 4</li>
    <li id="list-item2">text 2</li>
    <li id="list-item1">text 1</li>
</ul>
<script>
var list = document.getElementById('mylist');

var items = list.childNodes;
var itemsArr = [];
for (var i in items) {
    if (items[i].nodeType == 1) { // get rid of the whitespace text nodes
        itemsArr.push(items[i]);
    }
}

itemsArr.sort(function(a, b) {
  return a.innerHTML == b.innerHTML
          ? 0
          : (a.innerHTML > b.innerHTML ? 1 : -1);
});

for (i = 0; i < itemsArr.length; ++i) {
  list.appendChild(itemsArr[i]);
}
</script>

【讨论】：

【解决方案3】：

让我们用 XML 来做，构建一个数组，对数组进行排序，然后构建 lis。

var symbols = xmlDoc.getElementsByTagName("Stock");
var items = [];
for (var i = 0; i < symbols.length; i++) {
 items.push(symbols[i].getAttribute('symbol'));  //build array of the symbols
}
var lis = items.sort()  //sort the array
               .map( function(txt) {  //loop over array
                 return "<li>" + txt + "</li>";  //build the li
               }).join("");  //join the indexes as one string
console.log(lis);  //the lis in a string.

【讨论】：