選擇器返回多個元素時使用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');