我在jQuery中使用了一个简单的for
循环。在下面的示例中,如果我删除了调用.remove()
函数的行,console.log
将输出所有元素。但是,如果我将调用添加到.remove()
,则不再记录所有元素。
我做错了什么?
注意:
我知道我可以使用$('.list').remove()
删除所有元素,但这只是一个例子。我想知道循环没有按预期运行的原因。
我也尝试了.each()
功能,但效果很好。但我希望找到一个for
循环的解决方案。
$('.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>
答案 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,所以循环退出。你总是只用这种循环方式删除一半的项目。