gpt4 book ai didi

javascript - 按字母顺序对
  • 元素进行排序
  • 转载 作者:数据小太阳 更新时间:2023-10-29 02:48:25 33 4
    gpt4 key购买 nike

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

    33 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com