爲什麼你必須從集合中重新選擇一個JQuery元素？

Question

我的網頁上有許多複選框，每個複選框都有一個名稱屬性作爲其有用的值。

我只想獲取檢查項目的值列表。我能得到像這樣的元素集合......

var checkedItems = $(".checkbox:checked"); 

現在我想創建列表（串），所以我創建了一個環......

var list = ""; 
for (var i = 0; i < checkedItems.length; i++) { 
    list += $(checkedItems[i]).attr("name") + "\n"; 
} 

這工作，給我我名單。但問題是，爲什麼我必須應用JQuery對象thingy，即$(...)才能使用attr屬性？

，如果我有以下的，而不是它不會工作...

list += checkedItems[i].attr("name") + "\n"; 

但可以肯定的陣列應該是JQuery的元素已經集合？爲什麼重新投射？

工作示例的Here is a JSFiddle如果有人想嘗試一下

編輯：爲什麼這項工作...

var item = $("#item"); 
var name = item.attr("name"); 

Answer 1

你的問題的代碼是錯誤的，因爲

$(checkedItems[i].attr("name")) 

確實應該

$(checkedItems[i]).attr("name") 

---

除此之外，你真的應該做這樣的

var list = ""; 
checkedItems.each(function(){ list += this.name + '\n'; }); 

演示在http://jsfiddle.net/dGeNR/2/

---

的原因，它不會工作，當你使用[]訪問jQuery對象中的元素時，你會返回對DOM元素的直接引用，而不是另一個jQuery對象。

Answer 2

爲了能夠調用jQuery的功能，你需要用的內容$()或jQuery()。

我有固定的例子在http://jsfiddle.net/dGeNR/1/

您需要使用list += $(checkedItems[i]).attr("name") + "\n";

Answer 3

那麼在你的問題的列表建築規範不工作;它應該是：

for (var i = 0; i < checkedItems.length; i++) 
    list += $(checkedItems[i]).attr("name") + "\n"; // or just checkedItems[i].name 

的「.attr（）」函數只是定義用於在匹配元素的列表中的第一元件返回的屬性值。它可能已被設計爲返回一個數組（如原型庫中的「.pluck（）」函數），但它不會那樣工作。 「.css（）」jQuery方法在這方面與「.val（）」類似。

另一種方式做你想要的是：

var list = checkedItems.map(function() { 
    return this.name; 
}).get().join('\n'); // thanks SLaks :-) 

Answer 4

checkedItems[i]是原始DOM元素，而不是一個jQuery對象。
要獲得集合中給定元素的jQuery對象，請調用checkedItems.eq(i)。

您可以通過編寫

var list = $(".checkbox:checked") 
    .map(function() { return this.name; }) 
    .get() 
    .join('\n'); 

Answer 5

我相信，你實際上做的是這更很好地做到這一點：

list += $(checkedItems[i]).attr("name") + "\n"; 

checkedItems是一個jQuery選擇。它包含對它包含的元素的引用。這些元素可以通過jQuery方法操作，或者直接用checkedItems[n]訪問，其中n是一個基於0的索引。

這些屬性不是jQuery選擇：它們是本地DOM元素。如果您想使用像attr這樣的jQuery方法，則需要創建一個新的jQuery對象，幷包裝該本機對象。

在這種情況下，你能避免通過使用eq方法，該方法通過使用數字鍵會從原來選擇一個jQuery選擇：

list += checkedItems.eq(i).attr('name') + "\n"; 

你的情況更妙的是使用的map和get和Array.prototype.join組合：

var list = checkedItems.map(function() { 
    return this.name; 
}).get().join('\n');