如何在保留外部 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
