在`for`循环中调用`.remove()`并不能删除所有元素

时间:2014-07-04 01:02:04

标签: javascript jquery for-loop

我在jQuery中使用了一个简单的for循环。在下面的示例中,如果我删除了调用.remove()函数的行,console.log将输出所有元素。但是,如果我将调用添加到.remove(),则不再记录所有元素。

我做错了什么?

注意:

我知道我可以使用$('.list').remove()删除所有元素,但这只是一个例子。我想知道循环没有按预期运行的原因。

我也尝试了.each()功能,但效果很好。但我希望找到一个for循环的解决方案。

http://jsfiddle.net/53HzV/1/

$('.btn').click(function(){
    for (var i = 0; i < $('.list').length; i++) {
        console.log($('.list').eq(i));

        $('.list').eq(i).remove();
    }
});


<div class="list">list</div>
<div class="list">list</div>
<div class="list">list</div>
<div class="list">list</div>

<div class="btn">btn</div>

2 个答案:

答案 0 :(得分:4)

以下是您的代码正在执行的操作:

第一个循环:i = 0,4个div(长度= 4),删除第一个(索引0)

第二个循环:i = 1,3 div(长度= 3),删除第二个(索引1)

第三循环:i = 2,2 div(长度= 2),不执行任何操作,因为i =长度

显然你的代码会在第三个循环中断开。

答案 1 :(得分:-1)

最好的方法是重构你的代码并使用你尚未使用的jQuery的一些功能。如果想要在单击按钮时删除每个class=list元素,则可以执行以下操作:

$('.btn').click(function(){
  $('.list').each(function() {
    $(this).remove();
  });
});

如果需要,此方法允许您添加逻辑,以便在删除之前检查每个元素。

您的循环不起作用,因为您正在使用i变量访问要删除的元素,并且列表的长度正在通过循环更改每次迭代。因此,在您的情况下,由于有4个项目(意味着循环中使用.eq(i)的索引0-3),一旦删除前两个(和i=2),$('.list').length不再计算结果为4,但现在为2,所以循环退出。你总是只用这种循环方式删除一半的项目。