选择器:仅获取特定级别的后代的最快方法

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

本文关键字：后代 方法 获取 选择器      更新时间：2023-09-26

>我有一个表格，如下所示：

<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>元素。后者似乎过于复杂，涉及多个查询。

有没有办法使它更快/更有效？

首先，x.find('tbody > tr')会找到所有<tr>。你需要做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 );
获得

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

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

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

使用 可以使用 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>
相关文章：