使用jQuery从列表中选择元素

Question

<form id="foo">
    <input></input>
    <input></input>
    <input></input>
</form>

I want to do:

document.getElementById("foo").getElementsByTag("input")[1];

But in jQuery. I want to select a certain object under #foo by an index.

This is my first guess as to how to do this:

$('#foo input[1]').val("BlahBlah");

I think it would be the same in CSS too.

Answer 1

You could do it this way:

$('#foo input').eq(1).val("BlahBlah");

That will give you the second input. If you want the first, change the 1 to a 0. The .eq() function is 0 based.

Answer 2

In jQuery there are a couple of methods defined to select and use elements from a (DOM objects) list.

By using:

var list = $("#foo");

You would capture the entire #foo . If your in for simplicity you could get the children (ie the input fields) by using var children = list.children(); But if you want something that seems a bit more like findElementsByTag, you could use var children = list.find('input'); (Which ofcourse could be a one liner, but usually you want to re-use the entire list too)

To get the first and last item of a certain list of children there are some predefined functions:

var first = children.first();
var last  = children.last(); 

To find an -nth element you can use http://api.jquery.com/eq/ or http://api.jquery.com/nth-child-selector/

So you would get (note it works just like an array with 0-based index)

var second = children.eq(1);

If you like CSS selector style more you can also try (note the 1-based index)

var second_b = $("#foo input:nth-child(2)");

Answer 3

$('#foo :input').eq(1).val('BlahBlah')

Answer 4

您可以使用eq（）选择器：

$('#foo input:eq(1)').val("BlahBlah");

Answer 5

You can use the eq selector. It receives a zero-based index:

$('#foo input:eq(1)').val('a value');

Answer 6

Use nth-child(n) pseudo class like this ...

$("#foo input:nth-child(0)").val("BlahBlah");
$("#foo input:nth-child(1)").val("BlahBlah");
.
.
.
$("#foo input:nth-child(n)").val("BlahBlah");

Answer 7

我会说 ：

$($('#foo input')[1]).val("BlahBlah");