javascript - 选择器 : Fastest way to get descendants of a specific level only

Question

我有一个像这样的表:

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

我正在使用 jQuery，并且存在一个存储的选择器来获取最外层的表:

var x = $('#table')

从此开始如果想获得所有第一级<tr> -元素。

如果我使用其中之一:

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

...第一个自然会选择所有嵌套的 <tr> - 元素也是如此。后者似乎过于复杂并且涉及多个查询。

有没有办法让它更快/更高效？

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