在DOM中循環元素的ID

Question

我在我的html中有幾個帶有id的div元素。

這是我的JS：

var frameList = $('div'); 

for(i = 0; i < frameList.length; i++) { 
    console.log(frameList[i].attr('id')); 
}; 

也就是說，我得到的元素列表，然後遍歷每個元素並試圖獲得其ID。這不起作用，我明白爲什麼。我怎麼能使它工作？

Answer 1

通常匹配jQuery選擇該元素的集合所使用的每個重複，在這裏this綁定到匹配的當前元素迭代期間設置

$('div').each(function(){ 
    console.log(this.id); 
}); 

雖然你的具體例子...

這裏的問題是，當你使用數組索引訪問frameList，你正在訪問jQuery創建的psuedo數組。這個底層數組只保存匹配選擇器或包含在jQuery對象中的一組元素。

這些元素僅公開本機API。這裏的一個選擇是訪問這些元素上的本機ID。

console.log(frameList[i].id); 

另一種選擇是使用jQuery的功能eq得到jQuery對象爲元素，然後用attr

console.log(frameList.eq(i).attr('id')); 

Answer 2

frameList[i]不是jQuery對象，因此.attr()未定義。

要麼frameList[i].id或frameList.eq(i).attr("id")應工作，雖然：

var frameList = $('div'); 
 

 
for(i = 0; i < frameList.length; i++) { 
 
    console.log(frameList[i].id); 
 
    console.log(frameList.eq(i).attr("id")); 
 
};

<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="one"></div> 
 
<div id="two"></div> 
 
<div id="three"></div> 
 
<div id="four"></div>

Answer 3

現在你正在使用jQuery的你應該使用jQuery.each：

$('div').each(function() { 
    console.log(this.id); 
});