按字母顺序对 <li> 元素进行排序

Question

按字母顺序对 <li> 元素进行排序

6

我如何在保留外部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>

- Littledude1222

为什么你不在创建列表之前先对它进行排序呢？先对数组进行排序，然后再构建列表。 - epascarello

因为我尝试了一个小时都没能让它工作。后来发现了这个排序函数，于是决定用这种方式试一试。 - Littledude1222

3个回答

1

<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>

- b2ok

0

那么让我们使用XML来完成它，构建一个数组，对数组进行排序，然后构建列表。

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.

- epascarello

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user1106925 · Accepted Answer

li

lis

ul.appendChild(lis[i])

lis[i].innerHTML = vals[i];

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>