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>

Answer 1

您当前的解决方案不起作用，因为index是在for循环首次添加事件侦听器时初始设置的闭包的一部分。您可以使用.indexOf()在子元素中搜索您单击的元素的索引。您首先需要将子级转换为数组(这在下面使用排列语法...完成(，因为它是一个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>