Обновление нескольких элементов из одного селектора?

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]); 
    }); 
});