从一个选择器更新多个元素？

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