使用jQuery选择器遍历DOM元素

第一个原因是 for 循环。

jQuery有一个习惯用法,用于在选定的元素上循环。。

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

请看一下 for...in 为了更好地理解for…in循环在javascript中的工作方式,它没有像say.NET或Java那样枚举。

摘自文章:

尽管使用它作为遍历数组的一种方式很有诱惑力,但这是一个坏主意。

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

在其他的基础上稍加改进 .每个 例如,可以省略 top 可以稍微清理一下。第一个参数 .每个 在匹配元素集合中的元素索引中;您可以通过在每个步骤中将其乘以30来实现相同的目的。没有递增也没有 顶部 变化多端的混乱:

$('.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() 检索元素数组。

“for(obj中的var key)”适合迭代对象的成员。只要不扩展原生JavaScript数组的原型,它就可以工作。jQuery对象可能看起来像一个本地JavaScript数组,但它不是“for(in)”失败的原因。

你可以用 .each 要在jQuery对象上迭代,请执行以下操作: var顶部=0;

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

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

尝试:

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