JavaScript - 如何在使用 InsertBefore() 重新排序后检索类元素的新索引

Question

注意：我不知道 JQuery，只知道 Vanilla JavaScript。

晚上好，

使用 insertBefore() 函数重新排序类元素后，我无法检索类元素的更新索引。

示例：元素 A、B、C 的索引为 0、1、2 重新排列后：C、A、B 的索引为 2、0、1，而不是 0、1、2。

这是我用于测试的代码。您可以单击单个元素，按钮重新排序会将最后一个元素移到第一个之前，并且可以在控制台日志中查看索引结果：

let container = document.getElementById('container');

let items = document.querySelectorAll('.items');

items.forEach((row, index) => {
  row.addEventListener('click', () => {
    console.log(index);
  });
});

let reorder = document.getElementById('reorder').addEventListener('click', () => {
  container.insertBefore(container.children[4], container.children[0]);
});

#container {
  border: 2px solid black;
  display: inline-block;
  position: relative;
}

.items {
  border: 2px solid red;
  margin: 2px;
  width: 20px;
}

<div id="container">

  <div class="items">0</div>
  <div class="items">1</div>
  <div class="items">2</div>
  <div class="items">3</div>
  <div class="items">4</div>

</div>

<button id="reorder">ReOrder</button>

Answer 1

您当前的解决方案不起作用，因为 index 是在您的 for 循环首先添加事件侦听器时最初设置的闭包的一部分。您可以使用.indexOf() 在children 中搜索您单击的元素的索引。您首先需要将孩子转换为一个数组（这在下面使用spread syntax ... 完成），因为它是一个HTMLCollection，它没有 indexOf 方法：

let container = document.getElementById('container');

let items = document.querySelectorAll('.items');

items.forEach((row, index) => {
  row.addEventListener('click', (event) => {
    console.log([...container.children].indexOf(row));
  });
});

let reorder = document.getElementById('reorder').addEventListener('click', () => {
  container.insertBefore(container.children[4], container.children[0]);
});

#container {
  border: 2px solid black;
  display: inline-block;
  position: relative;
}

.items {
  border: 2px solid red;
  margin: 2px;
  width: 20px;
}

<div id="container">
  <div class="items">0</div>
  <div class="items">1</div>
  <div class="items">2</div>
  <div class="items">3</div>
  <div class="items">4</div>
</div>

<button id="reorder">ReOrder</button>