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

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 元素。这种方法也有效（如果您坚持输入，那么它在 元素上的工作效果就不一样）：

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