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