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

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

Вы можете проверить это здесь , .eq() получить объект jQuery, представляющий элемент с этим индексом, а не элемент DOM.Этот подход также работает (если вы придерживаетесь входных данных, он не будет работать так же, например, для элемента <select>):

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

Вы можете проверить это здесь

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