使用jQuery选择器遍历DOM元素

有人能告诉我为什么这不起作用吗？使用jQuery选择器遍历DOM元素

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

2010-11-18 Yarin

它在做什么（或不做）？ – 2010-11-18 15:50:03

永远不会进入循环 – Yarin 2010-11-18 15:58:54

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

jQuery有用于遍历所选元素的成语..

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

请看一看for...in为更好的理解方式的for ... in循环中的JavaScript的作品，它不枚举就像.NET或Java一样。

从文章：

虽然它可能是很有诱惑力的使用这样的一种方式来遍历数组，这是一个坏主意。

2010-11-18 15:49:12

感谢您指出我错误使用的JavaScript循环，您刚刚救了我一些伤害 – Yarin 2010-11-18 16:02:38

声明中的$（'。positionableDiv'）是一个具有很多属性的jQuery对象。你想要的是遍历匹配的元素，这是不是这样做的。

尝试：

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

2010-11-18 15:50:20 Orbling

正如Quintin所述，使用.each（）方法是迭代匹配集合的更一般方法元素。 .css（）方法提供了一种直接使用回调函数进行处理的方法，所以我如上所述进行了演示。在这种情况下可能稍微不太清楚，因为在需要返回的值之后设置游戏中的变量。 – Orbling 2010-11-18 15:57:44

我很欣赏你提供的选择，总是很好地知道所有选项 - 谢谢 – Yarin 2010-11-18 16:06:21

@Yarin哪种方法更合适取决于当前的情况。 jQuery擅长使代码变得简洁明了，所以很高兴看到许多类似的替代方法。 – Orbling 2010-11-18 16:09:22

的 “为（在OBJ VAR键）” 是适合于迭代的对象的成员。只要原型没有扩展，它就适用于原生JavaScript数组。一个jQuery对象可能看起来像一个本地JavaScript数组，但它不会因此“for（in）”失败。

您可以使用.each来遍历jQuery对象： var top = 0;

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

2010-11-18 15:52:48

此外，即使它是一个数组，您不会希望用于for-in，因为@Quintin指出......并且我刚刚发现 – Yarin 2010-11-18 16:08:08

迭代一个匹配的元素正确的方法是用.each，因为其他的答案已经提到。试图使用循环将遍历jQuery对象的属性，而不是它所匹配的元素。

若要稍微改进其他某些.each示例，可以省略top变量以稍微清理一下。 .each的第一个参数位于匹配元素集合中元素的索引中;你可以通过在每一步乘以30来达到同样的目的。没有递增，没有top可变杂乱东西：

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

2010-11-18 15:59:25 meagar

这会工作：

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

基本上，你用get()检索元素的数组。

2010-11-18 16:00:05

回答