javascript - 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?

Answer 1

首先，x.find('tbody > tr')会找到所有<tr>s。x.find('> tbody > tr')假设来自您的示例x，您将需要这样做。x

我对两者都进行了测试，这是我的发现。

.children(): 3.013ms
>: 0.626ms

所以>方法比方法快.children()。函数调用加起来......几乎没有。

这是我用于测试的 JavaScript。

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 );

Answer 2

direct children获得a的最快方法parent是.children，所以你可以做的是：

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

.find()也会搜索child of child，所以你可能不想使用它。

Answer 3

使用可以使用jQuery的.first()方法来查找第一个<tr>元素，

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

尽管您希望找到第一个<tr>具有嵌套子元素的元素，但您可以使用.has(). 例如：http: //jsfiddle.net/cwL4q/3/

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

虽然，我强烈建议<tr>用一个类简单地标记“嵌套”，然后你可以简单地更快地访问它们，因为你知道。

$('.nestedrow');

对于下面的 HTML：

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