为什么必须从集合中重新选择JQuery元素？

我的页面上有许多复选框，每个复选框都有一个有用值的name属性。

我想只获取已检查项目的值列表。我可以得到像这样的元素集合……

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

现在我想创建列表（字符串），所以我创建一个循环…

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

这有效，并给了我我的清单。但问题是，为什么我必须应用JQuery对象，即$(...)来使用attr属性？

如果我有以下而不是它将无法正常工作……

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

但是数组肯定应该是JQuery元素的集合吗？为什么要重播？

这是一个工作示例的JSFiddle ，如果有人想尝试的话

编辑：为什么这个工作……

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

你问题中的代码是错误的，因为

 $(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对象。

checkedItems[i]是一个原始的DOM元素，而不是一个jQuery对象。
要获取集合中给定元素的jQuery对象，请调用checkedItems.eq(i) 。

你可以通过写作更好地完成这项工作

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

我认为你实际做的是这样的：

 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');

那么你问题中的列表构建代码不起作用; 它应该是：

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

“.attr（）”函数仅定义为返回匹配元素列表中第一个元素的属性值。它可能被设计为返回一个数组（如Prototype库中的“.pluck（）”函数），但它不会那样工作。

“。css（）”jQuery方法在这方面类似，“。val（）”也是如此。

另一种做你想要的方法是：

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

为了能够调用jQuery函数，您需要将内容包装在$()或jQuery() 。

我在http://jsfiddle.net/dGeNR/1/修复了这个例子

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