CODEWITHSUNDEEP
javascriptjqueryjquery-selectorsfind
deostroll
deostroll

Reputation: 11975

find immediate tr elements of table element using jquery find()

I am trying to find all tr elements inside a table element. The table element it self has other table elements nested inside its rows. So when I do the following:

$(tbl).find('tr').hover(...);

...it picks up tr elements inside the nested table elements also. I just want the immediate tr elements of the table element I am trying to query.

$(tbl).find('>tr').hover(...); didn't work for me!

ps: tbl is a table element, not a string

Upvotes: 1

Views: 7977

Answers (4)

simplyharsh
simplyharsh

Reputation: 36373

Read full answer, please.

$(tbl).children()

will give you tbody and also thead if it exists. So if you want immediate tr, you will need to try this.

$(tbl).children('tbody').children('tr')

Don't forget to considertbody while fetching children of a table, as in Firefox a direct call to children like $(tbl).children() returns tbody and not tr, even if its not in your markup. Complex but useful.

Happy Coding.

Upvotes: 4

belugabob
belugabob

Reputation: 4460

Don't forget that - even if your markup doesn't include them - from a DOM point of view, tr elements are nested inside a tbody element, so you will need to include this in the selector.

Try something like...

$(tbl).find('tbody>tr').hover(...);

Although this will probably find the nested table's tbody too, so you'll probably need something like...

$(tbl).children().find('tr').hover(...);

Upvotes: 0

JochenJung
JochenJung

Reputation: 7213

This should work:

$(tbl).children('tr').hover(...);

Form the JQuery docu:

The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree.

Upvotes: 0

Codler
Codler

Reputation: 11256

$(tbl).children('tr').hover(...);

Upvotes: 0

Related Questions