使用jQuery选择器遍历DOM元素

Question

有人能告诉我为什么这行代码不起作用吗？

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

- Yarin

---

它在做什么（或者没有做什么）？ - Michael Todd

Answer 1

第一个原因是误用了for循环。

jQuery有一种惯用法来遍历选定的元素..

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

请查看for...in以更好地了解javascript中for...in循环的工作方式，它的枚举方式与.NET或Java不同。虽然可能会诱人将其用作遍历数组的一种方式，但这是一个坏主意。

- Quintin Robinson

---

谢谢你指出我错误使用 JavaScript 循环的问题，你刚刚帮我避免了一些麻烦。 - Yarin

Answer 2

正确遍历一组匹配元素的方法是使用.each，正如其他答案所述。尝试使用for..in循环将遍历jQuery对象的属性，而不是它所匹配的元素。

为了稍微改进一些其他.each示例，您可以省略top变量以使事情更加清晰。 .each的第一个参数是匹配元素集合中的元素索引；您可以在每个步骤中将其乘以30来实现相同的效果。没有递增和没有top变量杂乱事情：

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

- user229044

Answer 3

这会起作用：

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

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

- Šime Vidas

Answer 4

"for (var key in obj)"适用于迭代对象的成员。只要原型没有被扩展，它就适用于原生JavaScript数组。jQuery对象可能看起来像原生JavaScript数组，但实际上不是，因此"for (in)"会失败。

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

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

- Atanas Korchev

---

此外，即使它是一个数组，你也不想使用for-in，正如@Quintin所指出的那样...我刚刚发现。 - Yarin

Answer 5

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

尝试：

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

- Orbling

---

正如Quintin所说，使用.each()方法是迭代匹配元素集合的更通用方式。.css()方法提供了一种直接使用回调函数进行处理的方式，因此我在上面演示了这一点。由于变量在需要返回值之后设置，因此在这种情况下可能略微不太清晰。 - Orbling

我很感激你提供的备选方案，了解所有选项总是很好的-谢谢。 - Yarin

@Yarin：哪种方法更适合取决于手头的情况。jQuery擅长使代码简洁明了，因此很高兴看到提出了许多类似但又不同的方法。 - Orbling