javascript - append/appendChild 不适用于所有项目

Question

我试图仅使用 javascript 将所有列表项从一个列表移动到另一个列表，但由于某种原因，实际上只有一半被移动。

这是我正在做的一个工作示例:

var results_ul = document.getElementById('results');
var stores_li = document.getElementsByClassName('store-list-item');

for (var x = 0; x < stores_li.length; x++) {
  document.getElementById('hide').appendChild(stores_li[x]);
  stores_li[x].className += ' teste';
}

<p>results</p>
<ul id="results">
  <li class="store-list-item">Teste 1</li>
  <li class="store-list-item">Teste 2</li>
  <li class="store-list-item">Teste 3</li>
  <li class="store-list-item">Teste 4</li>
</ul>
<p>Hide:</p>
<ul id="hide"></ul>

似乎是什么问题？

Answer 1

getElementsByClassName 返回一个事件列表。

当您将该元素附加到另一个元素时，您改变了它在列表中的位置。

所以它开始为:

1 2 3 4

然后你移动第一个:

2 3 4 1

然后您访问第二个……但是第二个现在是 3，因为所有内容都已在列表中移动。

---

您可以将每个元素复制到一个数组中(这不是一个事件列表)，然后遍历该数组以移动它们(这样它们就不会随着您的移动而改变位置)。

或者，您可以使用 querySelectorAll返回一个非实时列表。