如何獲取使用jQuery的兩個類選擇的元素的屬性

Question

這看起來應該很簡單，但我有困難。

我需要選擇我DOM已應用這兩個checkbox和selected類元素，所以我用了的JavaScript代碼：

var queries = $(".checkbox.selected"); 
for (var i = 0; i < queries.length; i++) { 
    console.log(queries[i]); 
} 

打印出：

[<div class=​"checkbox selected">​Option 1​</div>​, 
<div class=​"checkbox selected">​Option 2​</div>​] 

問題是，當我使用queries[i].text()（內循環）時，我得到：

Uncaught TypeError: queries[i].text is not a function 

所以看起來好像我的queries不是DOM對象列表。 這怎麼可能？我試過這種多種方式，我根本無法訪問Option 1或Option 2文本。 有沒有人遇到這個錯誤？我是否正確訪問元素？

Answer 1

當你通過索引訪問時，你沒有這些元素的jQuery對象，只有普通的元素。你必須要做到這一點：

var queries = $(".checkbox.selected"); 
for (var i = 0; i < queries.length; i++) { 
    console.log($(queries[i]).text()); 
} 

但是，這是十分可怕的，使用jQuerys自己each：

$(".checkbox.selected").each(function(){ 
    console.log($(this).text()); 
}); 

Answer 2

因此，它看起來好像我的疑問不是DOM對象的列表

嘗試利用.textContent返回queries[i]內的文字DOM元素

var queries = $(".checkbox.selected"); 
 
for (var i = 0; i < queries.length; i++) { 
 
    console.log(queries[i].textContent); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div class="checkbox selected">Option 1</div> 
 
<div class="checkbox selected">Option 2</div>

Answer 3

你得到與queries[i].text()錯誤的原因是因爲你調用一個DOM元素jQuery的方法; queries是一個jQuery集合，但是，queries[i]是一個DOM元素。給定一個DOM元素，來訪問你想要jQuery方法jQuery的包裝的DOM元素：

$(queries[i]).text() 

不過，我會使用jQuery一路 - jQuery的.each() method：

var queries = $(".checkbox.selected"); 
queries.each(function(i,query) { 
    console.log($(query).text()); 
}); 

或者：

$(".checkbox.selected").each(function(i,query) { 
 
     console.log($(query).text()); //output: Option 1\nOption 2 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="checkbox selected">Option 1</div> 
 
<div class="checkbox selected">Option 2</div>