使用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

回答