使用 jQuery 选择器遍历 DOM 元素答案

【问题标题】：Using jQuery selectors to iterate through DOM elements使用 jQuery 选择器遍历 DOM 元素
【发布时间】：2010-11-18 15:46:18
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

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

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

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

来自文章：

尽管将其用作迭代数组的方法可能很诱人，但这是个坏主意。

【讨论】：

【解决方案2】：

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

要稍微改进一些其他.each 示例，您可以省略top 变量以稍微清理一下。 .each 的第一个参数在匹配元素集中的元素的索引中；您可以通过在每一步将其乘以 30 来实现相同的效果。没有递增，也没有 top 变量使事情变得混乱：

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

【讨论】：

【解决方案3】：

这会起作用：

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

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

【讨论】：

【解决方案4】：

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

您可以使用.each 来迭代一个jQuery 对象：变量顶部 = 0;

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

【讨论】：

【解决方案5】：

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

试试：

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

【讨论】：

正如 Quintin 所说，使用 .each() 方法是一种更通用的迭代匹配元素集合的方法。 .css() 方法提供了一种直接使用回调函数进行处理的方法，因此我如上所示进行了演示。在这种情况下可能不太清楚，因为在需要返回的值之后设置了正在播放的变量。
我很欣赏您提供的替代方案，总是很高兴知道所有选项 - 谢谢
@Yarin 哪种方法更合适取决于手头的情况。 jQuery 擅长使代码简洁明了，因此很高兴看到许多类似但替代的方法被提出。