Question

我正在研究一个项目，我找到了一些我不理解的东西。

我正在从元素中删除类以模拟选择/取消选择。

但是当我将一个类移除到一个元素时。这个元素从列表中消失了。因此列表大小会发生变化。

为什么元素会从列表中消失？是否发送了强制计算的事件？

Javascript＆amp; HTML文件

window.onload = function() {


  var listes = document.getElementsByClassName("test");
  var output = document.getElementsByClassName("output");


  for (var i = 0; i < listes.length; i++) {
    //not part of the problem ,just to show the output for the snippet
    output[0].innerHTML = output[0].innerHTML + 'list size ' + listes.length + '<br>';

    listes[i].classList.remove("test");

  }


}

<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>
<br>

<div class="output">output :
  <br>
</div>

输出

作为输出我得到：
清单大小4
清单大小3

没有保持迭代，因为i变得等于列表大小

Answer 1

list[i]可能不是您要删除的元素，因为在列表更改的每次迭代中，实际上您都希望删除新的第一个元素。

您还需要存储listes.length

的初始值

  var listes = document.getElementsByClassName("test");
  var listes_length = listes.length;
  var output = document.getElementsByClassName("output");


  for (var i = 0; i < listes_length; i++) {
    //not part of the problem ,just to show the output for the snippet
    output[0].innerHTML = output[0].innerHTML + 'list size ' + listes.length + '<br>';

    listes[0].classList.remove("test");

  }

编辑：如上所述，您可能想要使用Array

  var listes = document.getElementsByClassName("test");
  var alistes = Array.prototype.slice.call(listes, 0);
  var output = document.getElementsByClassName("output");


  for (var i = 0; i < alistes.length; i++) {
    //not part of the problem ,just to show the output for the snippet
    output[0].innerHTML = output[0].innerHTML + 'list size ' + listes.length + '<br>';

    alistes[i].classList.remove("test");

  }

Answer 2

您的listes不是数组，而是DOM nodeList！

制作它的数组副本，如下所示：

alistes = Array.prototype.slice.call(listes, 0);

从listes元素中删除类时，此alistes不会缩小。

Answer 3

我没有得到你的目标但是，我已经尝试过了：

<强> HTML

<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>
<br>
<div class="output">output :
    <br>
</div>

<强>的JavaScript

$(document).ready(function(){
    var listes = document.getElementsByClassName("test");
    var output = document.getElementsByClassName("output");
    for (var i = 0; i < listes.length; i++) {
        //not part of the problem ,just to show the output for the snippet
        output[0].innerHTML = output[0].innerHTML + 'list size ' + listes.length + '<br>';

        listes[i].classList.remove(".test");
    }

    });

工作小提琴：http://jsfiddle.net/iamraviteja/886d86t1/1/

删除类更改列表大小

3 个答案: