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

Using JQuery's .attr() When Selector Returns Multiple elements

本文关键字：JQuery 使用 attr 返回 选择器 元素      更新时间：2023-09-26

我正在尝试从几个字段中的每一个中提取 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（） 在这里不起作用？

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

假设 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);
});

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

像这样使用

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

所以试试 

dataX = $($('[name=common_name]').get(i)).attr('data-X');
相关文章：