Question

I would like to update multiple elements(with different values) from the same selector. What would be the easiest way to go about doing this? I have tried

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

with this HTML

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

A live example is here http://jsbin.com/afoda/6

I get an error though for undefined t[0].val is not a function. What is the proper way to access multiple elements like this?

Answer 1

You can use .eq(index) to get .val(), like this:

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

You can test it here, .eq() get the jQuery object representing the element at that index, rather than the DOM element. This approach also works (if you’re sticking to inputs, it wouldn’t work the same for example on a <select> element):

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

You can test that here