Javascript 使用jQuery选择器迭代DOM元素

有人能告诉我为什么这行不通吗

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

---

第一个原因是误用

for

循环

jQuery有一种在选定元素上循环的习惯用法

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

为了更好地理解for…in循环在javascript中的工作方式，请看一看，它的枚举方式与.NET或Java不同

第条：

虽然使用它作为迭代数组的一种方式可能很有诱惑力，但这不是一个好主意

语句中的$（'.positionableDiv'）是一个具有大量属性的jQuery对象。您想要的是遍历匹配的元素，而不是以这种方式完成

尝试：

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

您可以使用来迭代jQuery对象： var-top=0

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

---

正如其他答案所提到的，迭代一组匹配元素的正确方法是使用。尝试使用

for..in

循环将迭代jQuery对象的属性，而不是它匹配的元素

要稍微改进其他一些

。每个
示例，您可以省略
top
变量来稍微清理一下。
的第一个参数。每个
都位于匹配元素集中元素的索引中；你可以通过每一步乘以30来达到同样的效果。没有递增和
top
变量使事情变得混乱：

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

这将有助于：

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

基本上，您可以使用
get（）
来检索元素数组。
它在做什么（或不做什么）？正如Quintin所说，使用.each（）方法是迭代匹配元素集合的更一般的方法。.css（）方法提供了一种直接使用回调函数进行处理的方法，因此我如上所述进行了演示。在这种情况下可能不太清楚，因为在需要返回的值之后设置了起作用的变量。我感谢您提供的备选方案，了解所有选项总是很好的-Thanks@Yarin哪种方法更合适取决于当前的情况。jQuery擅长使代码简洁明了，因此很高兴看到提出了许多类似但可供选择的方法。感谢您指出我对javascript循环的错误使用，您为我节省了一些时间，而且，正如@Quintin所指出的，即使它是一个您不想在中使用的数组。。。我刚发现
var top = 0;
for (var pdiv in $('.positionableDiv').get()) {
   $(pdiv).css('top', top + 'px');
   top = top + 30;
}