排序 <li>按字母顺序排列的元素 [英] sorting <li> elements alphabetically
问题描述
如何在保留外部 html 的同时按字母顺序对无序列表进行排序?我当前的设置按字母顺序对列表进行排序，但是它只重新排列列表元素的内部 html 而不是整个元素，这是一个问题，因为在标签中我有特定于每个元素的基于事件的脚本调用.列表元素本身是由 xml 文档中的脚本添加的.这是html:
var xhttp;xhttp = 新的 XMLHttpRequest();xhttp.onreadystatechange = function() {如果(this.readyState == 4 && this.status == 200){加载(这个)；}};xhttp.open("GET", "stocks.xml", true);xhttp.send();函数 onLoad(xml) {var x, i, txt, xmlDoc;xmlDoc = xml.responseXML;txt = "";var StockList;x = xmlDoc.getElementsByTagName("Stock");for (i = 0; i < x.length; i++) {symbol = x[i].getAttribute('symbol');txt += "- "+ 符号 + "
";}document.getElementById("stockList").innerHTML = txt + "</ul>";sortList("股票符号");}函数 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];}功能鼠标悬停(目标){stockInfoDiv = document.getElementById("stockInfo");stockInfoDiv.innerHTML = 目标；}函数鼠标输出(){stockInfoDiv.innerHTML = "";}
h2 {颜色:海军蓝；}李{字体系列:等宽；字体粗细:粗体；颜色:海军蓝；}李:悬停{字体系列:等宽；字体粗细:粗体；红色;}<头><title></title><身体><h2>股票列表:</h2><div id="stockList"><br/><br/><br/><div id="stockInfo">
</html>
代替 lis[i].innerHTML = vals[i];，对 lis 列表进行排序并执行 ul.appendChild(lis[i]).这将从其在 DOM 中的位置移除当前 li 并将其附加到 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");<li>AAA</li><li>ZZZ</li><li>MMM</li><li>BBB</li>
How can I sort an unordered list alphabetically while retaining outer html? My current setup sorts the list alphabetically, however it only rearranges the inner html of the list elements rather than the entire element, which is a problem because within the tag i have event based script calls that are specific to each element. The list elements themselves are added by script from an xml document. Here's the 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>
Instead of lis[i].innerHTML = vals[i];, sort the lis list and do ul.appendChild(lis[i]). This will remove the current li from its position in the DOM and append it to the end of the ul. I'm assuming the only li elements are direct children of the 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>
这篇关于排序 <li>按字母顺序排列的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
