[英]Using JQuery's .attr() When Selector Returns Multiple elements
I am trying to pull 2 pieces of data from each of several fields. 我试图从每个字段中提取2个数据。 All the fields have been given the same "name" so as to allow them to be referenced easily.
所有字段都被赋予了相同的“名称”,以便可以轻松引用它们。
<input type="text" name="common_name" data-X='ABC'>
The first piece of data I am pulling is their values, which does seem to be working. 我要提取的第一笔数据是它们的值,这似乎确实有效。 My issue is when I try to use
attr()
. 我的问题是当我尝试使用
attr()
。 It just stops dead in the water at that point. 在那一点,它只是死在水中而已。
var length = $('[name=common_name]').size();
for(var i=0; i < length; i++){
var value = parseInt($('[name=common_name]').get(i).value); //doesn't kill the script
var dataX = $('[name=common_name]').get(i).attr('data-X'); //Script is killed here
}
Since I'm not having issues with using attr()
in general when the selector is selecting the element based on an id, I would think the issue has to do with the fact that in this case multiple elements are being returned by jQuery. 因为当选择器基于id选择元素时,我一般不会使用
attr()
,因此我认为问题与jQuery返回多个元素这一事实有关。 What I am confused by is that I thought that get(#)
is supposed to grab a specific one…in which case I don't see what the problem would be. 我感到困惑的是,我认为
get(#)
应该抓住一个特定的对象……在这种情况下,我看不出会有什么问题。 (After all, using get(#)
DOES work when I use val()
). (毕竟,当我使用
val()
时,使用get(#)
确实可行。)
So…why doesn't attr() work here? 所以……为什么attr()在这里不起作用?
.get() returns a dom element reference which does not have the .attr() method, so you can use the .eq() method which will return a jQuery object .get()返回不具有.attr()方法的dom元素引用,因此您可以使用.eq()方法,该方法将返回jQuery对象
var length = $('[name=common_name]').size();
for (var i = 0; i < length; i++) {
var value = parseInt($('[name=common_name]').eq(i).val()); //doesn't kill the script
var dataX = $('[name=common_name]').eq(i).attr('data-X'); //Script is killed here
}
The correct way to iterate over an jQuery object collection is to use the .each() method where the callback will be invoked for each element in the jQuery collection 迭代jQuery对象集合的正确方法是使用.each()方法,其中将为jQuery集合中的每个元素调用回调
$('[name=common_name]').each(function () {
var $this = $(this);
var value = parseInt($this.val()); //or this.value
var dataX = $this.attr('data-X'); //or $this.data('X')
})
Suppose the html is like this 假设html是这样的
<input type="text" name="common_name" data-X='ABC'>
<input type="text" name="common_name" data-X='DEF'>
<input type="text" name="common_name" data-X='GHI'>
Now the script part 现在脚本部分
$('input[name="common_name"]').each(function() {
var el = $(this);
text_val = el.val();
data = el.attr('data-X');
console.log(text_val);
console.log(data);
});
attr is a jquery fn, should call by jquery object attr是一个jquery fn,应该由jquery对象调用
use like this 这样使用
$('[name=common_name]').attr('data-X')
so try 所以尝试
dataX = $($('[name=common_name]').get(i)).attr('data-X');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.