如何在保留外部 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>最佳答案
代替 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>关于javascript - 按字母顺序对 <li> 元素进行排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42722754/