当 Selector 返回多个元素时使用 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
 }

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. 我感到困惑的是，我认为这get(#)应该抓住一个特定的……在这种情况下，我看不出问题是什么。（毕竟，get(#)当我使用时，使用确实有效val()）。

那么……为什么 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')
})