Selector: Fastest way to get descendants of a specific level only

Question

I have a table like:

<table id="table">
    <tbody>
        <tr></tr>
        <tr>
            <td>
                <table>
                    <tbody>
                        <tr></tr>
                    </tbod>
                </table>
            </td>
        </tr>
     </tbody>
</table>

I'm using jQuery and there exists a stored selector to get the most outer table:

var x = $('#table')

Starting from that If want to get all first level <tr>-elements.

If I use one of those:

x.find('tbody > tr');
x.children('tbody').children();

… the first one will naturally select all nested <tr>-elements as well. The latter seems over-complicated and involves multiple queries.

Is there a way to make this faster/more efficient?

FYI, "childen" are always elements of the "first level". You want to get the children only, not all *descendants* (see [this graphic](http://felix-kling.de/blog/2011/09/20/relationship-in-the-dom/)) Why do you think what you have is not efficient? How did you test the performance? — Felix Kling, Sep 19 '13 at 10:57
@FelixKling Thanks the word `descendant` didn't came to my mind, when writing this question - I edited the title by now. I knew that `children` wouldn't fit 100% as there's that `tbody` inbetween. And I didn't test it, no. I just thought that there must be some way to get this straight with only one query instead of two. — lampshade, Sep 19 '13 at 12:24

score 2 · Accepted Answer · answered Sep 19 '13 at 11:19

First thing, x.find('tbody > tr') would find all <tr>s. You would need to do x.find('> tbody > tr'), assuming x is x from your example.

I ran a test and this with both and this was my finding.

.children(): 3.013ms
>: 0.626ms

so the > method is faster than the .children() method. The function calls add up... barely.

Here's my JavaScript for the testing.

var $table = $('#table'), $usingChildren, $usingAngleBracket;

console.time('.children()');
$usingChildren = $table.children('tbody').children('tr');
console.timeEnd('.children()');

console.time('>');
$usingAngleBracket = $table.find('> tbody > tr');
console.timeEnd('>');

console.log( $usingChildren, $usingAngleBracket );

Cool, I didn't know I can use a selector starting with `>`, like `> tbody > tr`. That's pretty nice and looks even faster according to your measurement. Thanks for your effort. — lampshade, Sep 19 '13 at 12:21

score 1 · Answer 2 · answered Sep 19 '13 at 11:04

1

the fastest way to get direct children of a parent is .children, so what you can do is:

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

.find() will search child of child too, so you may not want to use that.

answered Sep 19 '13 at 11:04

Bharat Soni

2,824
6
23
48

Thats actually, what I wrote in my question, getting the the children of the first `tbody`: `x.children('tbody').children();`. ;) – lampshade Sep 19 '13 at 12:16
this really is a faster way to do dat so i wrote it :) – Bharat Soni Sep 19 '13 at 16:31

MackieeE · Answer 3 · 2013-09-19T11:48:18.487

0

Use can use jQuery's .first() method to find the first <tr> element,

$('#mytable tr').first()

Although, as you wish to find the first <tr> that has nested child elements, you can filter it with .has(). For example: http://jsfiddle.net/cwL4q/3/

$("#mytable tr").has('tbody').first().css("background-color", "red" );

Although, I would strongly suggest simply labelling the 'nested' <tr>'s with a class, then you can simply access them much quicker as you know.

$('.nestedrow');

For the HTML below:

<table id="table">
        <tbody>
            <tr></tr>
            <tr class="nestedrow">
                <td>
                    <table>
                        <tbody>
                            <tr></tr>
                        </tbod>
                    </table>
                </td>
            </tr>
         </tbody>
    </table>

edited Sep 19 '13 at 11:48

answered Sep 19 '13 at 10:49

MackieeE

11,751
4
39
56

I actually want to get *all* children of the first level, not only the first one of the first level. – lampshade Sep 19 '13 at 10:57
@lampshade Ahh, I see the first **nested** level of ``'s? – MackieeE Sep 19 '13 at 10:58
@lampshade Adjusted answer, I think your title is slightly confusing though! =) – MackieeE Sep 19 '13 at 11:08

Selector: Fastest way to get descendants of a specific level only

3 Answers3