在循环浏览 HTML 时包装元素会导致问题

Question

我想将容器的每个项目包装在一个div中。当我遍历 HTMLCollection 时，一些元素被多次访问，而其他元素则被省略

.HTML

<div class="container">
<div class="item_1"></div>
<div class="item_2"></div>
<div class="item_3"></div>
<div class="item_4"></div>
<div class="item_5"></div>
<div class="item_6"></div>
<div class="item_7"></div>
<div class="item_8"></div>
<div class="item_9"></div>
</div>

.JS

const container = document.querySelector('.container');
const items = container.children;
for(let i = 0; i < items.length; i++) {
const wrapper = document.createElement('div');
wrapper.classList.add('wrapper');
wrapper.appendChild(items[i]);
container.appendChild(wrapper);
}

直接通过 HTMLCollection 循环会产生这个奇怪的结果

<div class="container">
<div class="item_2"></div>
<div class="item_4"></div>
<div class="item_6"></div>
<div class="item_8"></div>
<div class="wrapper">
<div class="item_1"></div>
</div>
<div class="wrapper">
<div class="item_5"></div>
</div>
<div class="wrapper">
<div class="item_9"></div>
</div>
<div class="wrapper">
<div class="wrapper">
<div class="item_7"></div>
</div>
</div>
<div class="wrapper">
<div class="wrapper">
<div class="wrapper">
<div class="wrapper">
<div class="item_3"></div>
</div>
</div>
</div>
</div>
</div>

当我将 HTML 格式转换为数组时问题得到解决

const items = Array.from(container.children);

我不明白是什么原因导致这种行为

Answer 1

您正在迭代container.children列表，您在迭代期间也更改了该列表。这搞砸了迭代。正如您自己提到的，您可以通过将container.children转换为数组来解决此问题，因为这样您就不会迭代实时container.children列表，而是遍历该列表的数组副本。此副本仍引用正确的子元素，以便使用appendChild()函数正确移动它们。

作为替代方法，您可以使用querySelecterAll()来检索要包装的所有元素。

const container = document.querySelector('.container');
const items = container.querySelectorAll('.container > *');
for(let i = 0; i < items.length; i++) {
const wrapper = document.createElement('div');
wrapper.classList.add('wrapper');
wrapper.appendChild(items[i]);
container.appendChild(wrapper);
}

.wrapper {
background-color: red;
}

<div class="container">
<div class="item_1">1</div>
<div class="item_2">2</div>
<div class="item_3">3</div>
<div class="item_4">4</div>
<div class="item_5">5</div>
<div class="item_6">6</div>
<div class="item_7">7</div>
<div class="item_8">8</div>
<div class="item_9">9</div>
</div>