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

Question

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

晚上好，

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

示例：重新排列时索引为 0、1、2 的元素 A、B、C：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>

标签： javascriptindexing

Answer 1

您当前的解决方案不能作为在您的循环首次添加事件侦听index器时最初设置的闭包的一部分。您可以通过使用在子for项中搜索来找到您单击的元素的索引。您首先需要将孩子转换为数组（这在下面使用扩展语法完成），因为它是一个HTMLCollection，它没有 indexOf 方法：.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>