选择器返回多个元素时使用JQuery的.attr（）

Question

我试图从每个字段中提取2个数据。 所有字段都被赋予了相同的“名称”，以便可以轻松引用它们。

 <input type="text" name="common_name" data-X='ABC'>

我要提取的第一笔数据是它们的值，这似乎确实有效。 我的问题是当我尝试使用attr() 。 在那一点，它只是死在水中而已。

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
 }

因为当选择器基于id选择元素时，我一般不会使用attr() ，因此我认为问题与jQuery返回多个元素这一事实有关。 我感到困惑的是，我认为get(#)应该抓住一个特定的对象……在这种情况下，我看不出会有什么问题。 （毕竟，当我使用val()时，使用get(#)确实可行。）

所以……为什么attr（）在这里不起作用？

Answer 1

.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
}

---

迭代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')
})

Answer 2

假设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'>

现在脚本部分

$('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);
});

Answer 3

attr是一个jquery fn，应该由jquery对象调用

这样使用

$('[name=common_name]').attr('data-X')

所以尝试

dataX = $($('[name=common_name]').get(i)).attr('data-X');