Take the 2-minute tour ×

How do I turn this, which uses two calls two children:

$('#id tr').children('td').children('input')

into something that calls children only once? I am trying to select every input text box inside a particular table row (tr) that's a child of #id. I've tried

$('#id tr').children('td input')


$('#id tr').children('td > input')

But neither of those work. I'm kinda new to these selector expressions, so sorry if it's obvious.

share|improve this question
add comment

4 Answers

up vote 6 down vote accepted

Although I like the $("#id tr td input") suggestions, in some cases (e.g. if you had the $("#id tr") object from some other source) you might instead be looking for .find(), which goes multiple levels deep (instead of .children() which only goes one):

$("#id tr").find("td input")
share|improve this answer
check my answer, which basically allows you to use the selector from another source. –  MarioRicalde May 16 '11 at 6:03
@kuroir, yes, if you have the selector instead of the object, you can also use the $("x", "y") syntax. Although---not that it really matters---some testing I've seen shows $("x", "y") to be slower than $("y").find("x"). I find it worse because it's less explicit. –  Domenic May 16 '11 at 6:40
worked like a charm. The thing that's nice is that find goes multiple levels deep, which I didn't know till reading this answer, and because of that I can just reduce it to $('#id').find('input'); Thanks again, +1 and check'd. –  Seth Carnegie May 16 '11 at 15:12
add comment

Why not just $('#id tr input')?

Or maybe $('#id input')

share|improve this answer
add comment

I'm amazed no one suggested this one:

$('td input', '#idc tr')

Which will allow you to have the #idc tr part from a variable. Basically what you're doing is doing a concatenation; so you read the right selector first, and then the left one, for instance:

$('> input', 'div')

Is the equivalent of:

$('div > input')

Now, lets do some golf here; the way you're passing the selector could be simplified to this two forms:

$('input', '#idc td')
// vs
$('#id').find('td input')

Both basically do the same, however as you may have noticed, the second one allows you to do jquery chaining; using .end() to go back to the previous selector #id.

I usually use the first statement whenever I need to do something simple that doesn't require me going back to the previous selector.

share|improve this answer
add comment

U can set a class for your inputs and select it

$('#id tr').children('td:input').hasclass('class name')

share|improve this answer
This not only won't work because td:input is invalid syntax, it also won't work because hasClass (not hasclass) returns a boolean instead of a jQuery object. –  Domenic May 16 '11 at 5:33
add comment

Your Answer


