使用jQuery选择器迭代DOM元素

Question

有人能告诉我为什么这不起作用？

var top = 0;
for (divToPosition in $('.positionableDiv')) {
   divToPosition.css('top',top+'px');
   top = top + 30;
}

Answer 1

第一个原因是滥用for循环.

jQuery有一个用于循环所选元素的习惯用法.

var top = 0;
$('.positionableDiv').each(function() {
   $(this).css('top',top+'px');
   top = top + 30;
});

请查看...以便更好地理解for循环在javascript中的工作方式,它不会像.NET或Java那样枚举.

来自文章:

尽管使用它作为迭代数组的方法可能很诱人,但这是一个坏主意.

Answer 2

.each正如其他答案所提到的,迭代一组匹配元素的正确方法是.尝试使用for..in循环将迭代jQuery对象的属性,而不是它匹配的元素.

要稍微改进其他一些.each示例,您可以省略该top变量以稍微清理一下.第一个参数.each位于匹配元素集合中元素的索引中; 你可以通过在每一步乘以30来实现同样的目标.没有增量,也没有top变量混乱:

$('.positionableDiv').each(function(i) {
    $(this).css('top', (i * 30) + "px");
});