How to get only direct child elements by jQuery function

Solution 1:

You can use find():

tbl.find("> tbody > tr")

Solution 2:

As @jave.web mentioned in the comments

To search through the direct children of an element use .children(). It will only search through the direct children and not traverse any deeper. http://api.jquery.com/children/

Solution 3:

This is exactly the reason why one should be careful with nesting tables. I really hope that you use them for data and not page layout.

Another issue that will probably ruin your day is using CSS selectors on nested tables... you basically have the same issue - you are unable to select TR elements of the outer table without selecting those inside the inner table, too. (You cannot use the child selector because it is not implemented in IE6)

This should work:

$("#table1 > tbody > tr")

However, I recommend that you hardcode the TBODY element, since you should not rely on the browser to create it for you.

Solution 4:

http://api.jquery.com/child-selector/

$('tb1 > tr')