Question

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

＆＃13;

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 = "";
}

＆＃13;

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

＆＃13;

<html>

<head>
  <title></title>

</head>

<body>
  <h2>List of Stocks:</h2>

  <div id="stockList">
  </div>

  <br />
  <br />
  <br />

  <div id="stockInfo">
  </div>
</body>

</html>

＆＃13;

Answer 1

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

＆＃13;

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");

＆＃13;

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

＆＃13;

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

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

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

3 个答案: