Selector:仅获取特定级别的子体的最快方法

首先, 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 );

最快的方式 direct children 的 parent 是 .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>