Question

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

以下是我正在做的事情的一个实例：

＆＃13;

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';
}

＆＃13;

<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>

＆＃13;

什么似乎是问题？

Answer 1

getElementsByClassName会返回直播列表。

将元素追加到其他元素时，可以更改其在列表中的位置。

所以它开始于：

1 2 3 4

然后你移动第一个：

2 3 4 1

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

您可以将每个元素复制到一个数组中（这不是 live 列表），然后遍历该数组以移动它们（这样它们就不会改变位置）。 / p>

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

Answer 2

您最好使用querySelectorAll而不是getElementsByClassName

＆＃13;

var results_ul = document.getElementById('results');
var stores_li = document.querySelectorAll('.store-list-item');

stores_li.forEach((item)=>{
  document.getElementById('hide').appendChild(item);
  item.className += ' teste';
});

＆＃13;

<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>

＆＃13;

Answer 3

尝试使用 querySelectorAll 。它将返回一个非实时列表。这就是你所需要的。

var stores_li = document.querySelectorAll('.store-list-item');

增加更多信息：

直播：当DOM中的更改反映在集合中时。修改节点时内容会受到影响。

非实时：当DOM中的任何更改不影响集合的内容时。

document.getElementsByClassName（）是一个HTMLCollection，并且是实时的。

document.querySelectorAll（）是一个NodeList，并不是实时的。

Answer 4

在您的代码中，您将从第一个列表中删除每个元素并插入新列表。删除2个元素后，它将在第一个列表中只有2个元素，但现在您正在循环中搜索不存在的第3个索引。所以为了使它工作，我已经在前面添加了每个元素。

＆＃13;

var results_ul = document.getElementById('results');
var stores_li = document.getElementsByClassName('store-list-item');
var hide_ul = document.getElementById('hide');
for (var x = 0, y = stores_li.length; x < y; x++) {
  hide_ul.insertBefore(stores_li[y-x-1],hide_ul.firstChild);
  stores_li[x].className += ' teste';
}

＆＃13;

<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>

＆＃13;

Answer 5

或者您可能想要使用Jquery克隆元素，然后您可以推入克隆元素，然后从顶部删除orginals。我找不到任何js的clone（），但是如果你想检查链接是here

Answer 6

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

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

append / appendChild不适用于所有项目

6 个答案: