Question

我希望获取正文中的所有元素，然后从数组中删除具有某个类的元素。但是，for循环会跳过该类的第一个元素。我添加了一些逻辑来为删除的元素添加类，并保留元素仅用于视觉反馈。您可以运行代码段来查看它。

＆＃13;

var list;
var all = [];
var newall = [];
list = document.body.getElementsByTagName('*');
for(var i = 0; i < list.length; i++) {
  all.push(list[i]);
}

for(var j = 0; j < all.length; j++) {
  if(all[j].classList.contains('div')) {
    all.splice(j, 1);
    all[j].classList.add('remove');
  } else {
    newall.push(all[j]);
    all[j].classList.add('keep');
  } 
}

＆＃13;

.remove {text-decoration: line-through;}

.keep {background: yellow;}

＆＃13;

<div id="alpha" class="div one">
alpha
</div>
<p id="bravo" class="div two">
bravo
</p>
<div id="charlie">
charlie
</div>

＆＃13;

Answer 1

问题是，一旦你拼接了元素，j的值就不应该增加。

假设您要删除索引1（j = 1）中的项并且数组的长度为3，一旦拼接，数组长度变为2，索引2处的值现在为索引1.在下一次迭代中你正在将j的值递增到2，现在循环条件失败，最后一次迭代无法执行。

var list;
var all = [];
var newall = [];
list = document.body.getElementsByTagName('*');
for (var i = 0; i < list.length; i++) {
  all.push(list[i]);
}

for (var j = 0; j < all.length; j++) {
  if (all[j].classList.contains('div')) {
    all[j].classList.add('remove');
    all.splice(j, 1);
    j--
  } else {
    newall.push(all[j]);
    all[j].classList.add('keep');
  }
}

.remove {
  text-decoration: line-through;
}
.keep {
  background: yellow;
}

<div id="alpha" class="div one">
  alpha
</div>
<p id="bravo" class="div two">
  bravo
</p>
<div id="charlie">
  charlie
</div>

Answer 2

Splice会导致数组成员重新编入索引，因此循环会跳过下一个成员。为了避免这种情况，从最后到开始迭代。如果要在结果数组中维护顺序，请使用 unshift 而不是 push 。

此外，您在从阵列中拼接成员后添加了删除类，因此将其添加到以下成员中。所以在拼接之前添加它。

＆＃13;

var all = [];
var newall = [];
var list = document.body.getElementsByTagName('*');
var i = j = list.length;

while (i--) {
  all[i] = list[i];
}

while (j--) {
  
  if(all[j].classList.contains('div')) {
    // add class before removing
    all[j].classList.add('remove');
    all.splice(j, 1);
    
  } else {
    // Since iterating backwards, add members to start of newall
    // with unshift rather than end with push
    newall.unshift(all[j]);
    all[j].classList.add('keep');
  } 
}

＆＃13;

.remove {text-decoration: line-through;}
.keep {background: yellow;}

＆＃13;

<div id="alpha" class="div one">alpha</div>
<p id="bravo" class="div two">bravo</p>
<div id="charlie">charlie</div>

＆＃13;

哦，创建 newall 似乎是多余的，因为它将包含与所有成员相同的成员。

for循环跳过数组中的第一项

2 个答案: