Fatal编程技术网
  • javascript/
  • Javascript 选择器：仅获取特定级别后代的最快方法

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

javascript jquery

Javascript 选择器：仅获取特定级别后代的最快方法,javascript,jquery,jquery-selectors,nested-table,Javascript,Jquery,Jquery Selectors,Nested Table,我有一张像这样的桌子： <table id="table"> <tbody> <tr></tr> <tr> <td> <table> <tbody> <tr></tr>

我有一张像这样的桌子：

<table id="table">
    <tbody>
        <tr></tr>
        <tr>
            <td>
                <table>
                    <tbody>
                        <tr></tr>
                    </tbod>
                </table>
            </td>
        </tr>
     </tbody>
</table>
如果要获取所有第一级
-元素，请从此开始

如果我使用其中一种：

x.find('tbody > tr');
x.children('tbody').children();
…第一个将自然地选择所有嵌套的
-元素。后者似乎过于复杂，涉及多个查询

有没有一种方法可以使它更快/更高效？

Use可以使用jQuery的方法来查找第一个
元素

$('#mytable tr').first()
尽管您希望找到第一个嵌套了子元素的
，但可以使用
.has（）
对其进行筛选。例如：

尽管我强烈建议只需用类标记“嵌套的”
，然后您就可以更快地访问它们

$('.nestedrow');
对于下面的HTML：

<table id="table">
        <tbody>
            <tr></tr>
            <tr class="nestedrow">
                <td>
                    <table>
                        <tbody>
                            <tr></tr>
                        </tbod>
                    </table>
                </td>
            </tr>
         </tbody>
    </table>
Use可以使用jQuery的方法查找第一个
元素

$('#mytable tr').first()
尽管您希望找到第一个嵌套了子元素的
，但可以使用
.has（）
对其进行筛选。例如：

尽管我强烈建议只需用类标记“嵌套的”
，然后您就可以更快地访问它们

$('.nestedrow');
对于下面的HTML：

<table id="table">
        <tbody>
            <tr></tr>
            <tr class="nestedrow">
                <td>
                    <table>
                        <tbody>
                            <tr></tr>
                        </tbod>
                    </table>
                </td>
            </tr>
         </tbody>
    </table>
获得
父母的
直接子女的最快方法是
.children
，因此您可以做的是：


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



.find（）
也将搜索子对象的子对象，因此您可能不想使用它。
获取父对象的直接子对象的最快方法是
.children
，因此您可以执行以下操作：


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



.find（）
也将搜索子对象的子对象，因此您可能不想使用它。
首先，
x.find（'tbody>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 );


首先，
x.find（'tbody>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 );



尝试使用jQuery过滤器。
FYI，“childen”始终是“第一级”的元素。你只想得到孩子，而不是所有的后代（参见）为什么你认为你拥有的东西效率不高？你是怎么测试表演的？我是说…孩子们course@FelixKling谢谢，我在写这个问题时，没有想到“后代”这个词，我现在编辑了标题。我知道
儿童
不可能100%适合，因为中间有
t身体
。我没有测试它，没有。我只是认为必须有某种方法可以通过一个查询而不是两个查询来解决这个问题。尝试使用
jQuery过滤器。
FYI，“childen”始终是“第一级”的元素。你只想得到孩子，而不是所有的后代（参见）为什么你认为你拥有的东西效率不高？你是怎么测试表演的？我是说…孩子们course@FelixKling谢谢，我在写这个问题时，没有想到“后代”这个词，我现在编辑了标题。我知道
儿童
不可能100%适合，因为中间有
t身体
。我没有测试它，没有。我只是想一定有办法用一个查询而不是两个查询来弄清楚这一点。我实际上想要得到第一级的所有子级，而不仅仅是第一级的第一个。@lampshade啊，我看到了第一个嵌套的
's？@lampshade调整答案，我觉得你的标题有点让人困惑！=）实际上，我想得到第一级的所有子级，而不仅仅是第一级的第一级。@lampshade啊，我看到了
's的第一个嵌套级？@lampshade调整了答案，我认为你的标题有点让人困惑！=）实际上，这就是我在问题中写的，得到第一个
tbody
的孩子：
x.children（'tbody'）.children（）；）这确实是一种更快的方法，所以我写了它：）事实上，这就是我在问题中写的，得到第一个
tbody
：
x.children（'tbody'）.children（）的子代；）这确实是一种更快的dat方法，所以我写了它：）酷，我不知道我可以使用以
开头的选择器，比如
>tbody>tr
。根据你的测量，这很不错，而且看起来更快。谢谢你的努力。很酷，我不知道我可以使用以
开头的选择器，比如
>tbody>tr
。根据你的测量，这很不错，而且看起来更快。谢谢你的努力。