從一個選擇器更新多個元素？

Question

我想更新同一選擇器中的多個元素（具有不同的值）。這樣做最簡單的方法是什麼？我曾嘗試

$(document).ready(function(){ 
    var t=$('.test input'); 
    t[0].val('Foo'); 
    t[1].val('Bar'); 
}); 

與此HTML

<div class="test"> 
    <input type="text"> 
    <input type="text"> 
</div> 

一個活生生的例子就在這裏http://jsbin.com/afoda/6

我得到儘管對於undefined t[0].val is not a function錯誤。訪問多個元素的正確方式是什麼？

Answer 1

您可以使用.eq(index)得到.val()，像這樣：

$(document).ready(function(){ 
    var t=$('.test input'); 
    t.eq(0).val('Foo'); 
    t.eq(1).val('Bar'); 
}); 

You can test it here，.eq()得到表示索引處的元素的jQuery對象，而不是DOM元素。這種方法也適用（如果你堅持投入，那就不是一個<select>元素的工作方式相同爲例）：

$(document).ready(function(){ 
    var t=$('.test input'); 
    t[0].value = 'Foo'; 
    t[1].value = 'Bar'; 
}); 

You can test that here

Answer 2

當你訪問一個jQuery對象中的元素通過索引，你不會得到每個元素的新的jQuery對象，你只需要獲取元素。如果你想使用val方法，你需要創建一個jQuery對象的每個元素：

$(document).ready(function(){ 
    var t = $('.class input'); 
    $(t[0]).val('Foo'); 
    $(t[1]).val('Bar'); 
}); 

另一種方式是遍歷元素和數組中獲取值：

$(document).ready(function(){ 
    var values = ['Foo', 'Bar']; 
    $('.class input').each(function(i){ 
    $(this).val(values[i]); 
    }); 
});