代码之家 › 专栏 › 技术社区 › Grumpy Civet

javascript-在不根据另一个列表创建新列表的情况下重新排序列表[关闭]

css jquery html javascript

Grumpy Civet · 技术社区 · 3 年前

我在一个页面上有一个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>

2 回复 | 直到 3 年前

Roko C. Buljan 3 年前

将索引数组缩减为 DocumentFragment
最后, .append() 将该DocumentFragment添加到同一父UL元素。

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

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

const liReordered = orderList.reduce((DF, i) => (DF.append(li[i]), DF), new DocumentFragment());
ul.append(liReordered);

<ul id="list">
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

或者简单地说:

ul.append(...orderList.map(i => li[i]));

通过这样做 已分配给该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!");
}));

const liReordered = orderList.reduce((DF, i) => (DF.append(li[i]), DF), new DocumentFragment());
ul.append(liReordered);

<ul id="list">
  <li>0 CLICK ME</li>
  <li>1 CLICK ME</li>
  <li>2 CLICK ME</li>
  <li>3 CLICK ME</li>
</ul>

Aalexander 3 年前

假设您的订单列表和<ul>中的元素大小相同。

制作数组的副本,因为稍后在修改列表时,我们需要复制的版本。
如果没有副本,结果将是

item4
item2
item3
item4

因为在上一次迭代中 列表元素[3] 元素位于 标记0 . 元素位于 标记0 是 项目4 . 因为我们在第一次迭代中设置了它

然后循环遍历listElements并将orderList索引中的元素分配给每个元素。

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

var listElements = [...document.querySelectorAll('ul > li')];

const copyList = listElements.map((x) => {
  return x.textContent;
})

listElements.forEach((x, i) => {

  x.textContent = copyList[orderList[i]];
})

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
</ul>

推荐文章

Softly · 单选按钮未按预期取值

10 月前

NovoMannen · 导航中的下拉菜单在内容后面重叠

10 月前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

10 月前

eXor420 · 如何在脚本标记中使用导出的函数?

10 月前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

10 月前

IonicMan · 剑道网格在宽度过大时不显示某些列

11 月前

Kernier · 如何将数学公式支持添加到StacksEditor?

11 月前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

11 月前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

11 月前

Akshay mek · Vscode扩展建议不适用于某些文件夹

11 月前