gpt4 book ai didi

javascript - 重新排序列表而不根据另一个列表创建新列表

转载 作者:行者123 更新时间:2023-12-04 08:11:22 25 4
gpt4 key购买 nike

关闭。这个问题需要更多focused .它目前不接受答案。












想改善这个问题吗?更新问题,使其仅关注一个问题 editing this post .

7 个月前关闭。




Improve this question




我在页面上有一个 HTML 列表,其中包含多个元素,每个元素不仅包含文本,还包含输入和表格。我也有一个像 [3,1,2,0] 这样的订单列表。
是否可以根据订单列表对页面上的 HTML 列表重新排序而不创建新列表,即页面上仅显示重新排序的列表而不显示原始列表?

var ul = document.querySelector('ul');

const order = [3,1,2,0];
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>

最佳答案

  • 使用数组 spread syntaxreduce您的索引数组变成了 DocumentFragment
  • 最后,.append()可迭代到同一个父 UL 元素。

  • const orderList = [3, 1, 2, 0];

    const ul = document.querySelector('#list');
    const li = ul.querySelectorAll('li');
    ul.append(...orderList.map(i => li[i]));
    <ul id="list">
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    </ul>

    使用 DocumentFragment似乎比上述使用 Spread syntax 使用数组解构的方法稍慢根据 this benchmark test
    const liReordered = orderList.reduce((DF, i) => (DF.append(li[i]), DF), new DocumentFragment());
    ul.append(liReordered);
    这样做 已分配给该 LI 元素的任何事件都将保留 ,因此不会因为将它们重新插入到 DOM 中而丢失(就像使用 innerHTMLinsertAdjacentHTML 等的情况一样)

    const orderList = [3, 1, 2, 0];

    const ul = document.querySelector('#list');
    const li = ul.querySelectorAll('li');

    li.forEach(el => el.addEventListener("click", () => {
    console.log("Events are preserved!");
    }));

    ul.append(...orderList.map(i => li[i]));
    <ul id="list">
    <li>0 CLICK ME</li>
    <li>1 CLICK ME</li>
    <li>2 CLICK ME</li>
    <li>3 CLICK ME</li>
    </ul>

    关于javascript - 重新排序列表而不根据另一个列表创建新列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65941162/

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