为什么必须从集合中重新选择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"; 

在你的情况下更好的是使用mapgetArray.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";