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

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

css jquery html javascript

Grumpy Civet · 技术社区 · 5 年前

我在一个页面上有一个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 回复 | 直到 5 年前

Roko C. Buljan 5 年前

将索引数组缩减为 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 5 年前

假设您的订单列表和<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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

1 年前

user28928120 · 如何在jquery中选择所有类?

1 年前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

1 年前

Eliable · 使点击计数器和进度条协同工作

1 年前

mlri · 从不同的onclick事件执行相同的javascript函数

1 年前

Cymro · 如何将jquery$(this)与$(document).keyup一起使用

1 年前

Jack Maessen · 在处理程序上使用时如何获取输入类型

1 年前

BlueDogRanch · 使用jQuery Datepicker和dateFormat、altFormat和altField以及$(this)

1 年前

Jameel · Jquery:未捕获SyntaxError:在参数列表后的“Node”上执行“appendChild”失败:缺失)

1 年前