使用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...in以更好地理解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");
});

Answer 3

这样可行：

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

基本上，您使用get()来检索元素数组。

Answer 4

“for（obj中的var键）”适用于迭代对象的成员。只要原型未扩展，它就适用于本机JavaScript数组。 jQuery对象可能看起来像是一个本机JavaScript数组，但因此“for（in）”失败。

您可以使用.each迭代jQuery对象： var top = 0;

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

Answer 5

语句中的$（'。positionableDiv'）是一个具有许多属性的jQuery对象。你想要的是迭代匹配的元素，这不是那样做的。

尝试：

var top = 0;
$('.positionableDiv').css('top', function(index, value) {
    var cTop = top;
    top = top + 30;
    return cTop + 'px';
});