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

Question

关闭。这个问题需要更多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>

Answer 1

使用数组 spread syntax或 reduce您的索引数组变成了 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 中而丢失(就像使用 innerHTML 或 insertAdjacentHTML 等的情况一样)

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>