Question

我有以下表结构。

<table id='mytable'>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>
        <table>
            <tr><td>A</td></tr>
            <tr><td>B</td></tr>
            <tr><td>C</td></tr>
        </table>
    </td></tr>
</table>

我想要做的只是从TR获取直接mytable元素。显然，TR有4个直接mytable。

以下显示三个陈述。我预计他们会返回相同的结果。但是他们不。

var mytable$ = $("#mytable");

var trcount1 = mytable$.children("tbody").children().length; // trcount1 = 4
var trcount2 = mytable$.children("tbody > tr").length; // trcount2 = 0
var trcount3 = $("tbody > tr", mytable$).length; // trcount3 = 7

只有获取trcount1的语法才是我想要的。

为什么trcount2和trcount3不是4？

由于

亚历

===================================

感谢jfriend00的回复。

这就是我想要的。

$("> tbody > tr", mytable$).length; // 4
mytable$.find("> tbody > tr").length; // 4

我错过了“＆gt;”在tbody之前。

Answer 1

在浏览器中，您的DOM实际上是这样的（请注意自动包含<tbody>标记）：

<table id='mytable'>
  <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>
        <table>
          <tbody>
            <tr><td>A</td></tr>
            <tr><td>B</td></tr>
            <tr><td>C</td></tr>
          </tbody>
        </table>
    </td></tr>
  </tbody>
</table>

所以，鉴于此，以下是如何解释您的观察结果：

var trcount1 = mytable$.children("tbody").children().length; // trcount1 = 4

你要求桌子的直接孩子是tbody，然后是那个孩子。有一个直接子项是tbody，并且有tbody个标记的四个直接子项，因此您获得了4个。

var trcount2 = mytable$.children("tbody > tr").length; // trcount2 = 0

您要求表格的直接子项（只有tbody对象）也与此选择器"tbody > tr"匹配。因为我们只查看表的直接子节点，所以这只是tbody对象本身而tbody对象iself与"tbody > tr"不匹配，结果为0，因为没有直接符合该标准的孩子。

请记住.children()仅限直接儿童。如果你想考虑孩子的所有孩子和孩子，那么你可以使用.find()或者只是将标签放在主选择器中。

var trcount3 = $("tbody > tr", mytable$).length; // trcount3 = 7

以下是您要求tr内有mytable个直接父级为tbody的{{1}}标记。由于tr中的所有mytable代码都符合该条件，因此其中有七个。

如果你只想要第一张表中的tr标签，我建议：

$("#mytable > tbody > tr")   // will be 4

如果你想要两个表中的所有tr标签，我建议：

$("#mytable  tr")   // will be 7

如果你只想要第二张表中的tr标签，我建议：

$("#mytable table tr")   // will be 3

Answer 2

trcount1获取tbody的直接后代的所有mytable$，然后获取您的四个tr s的所有直接后代。

trcount2查找tr子女中tbody的直接后代的所有mytable$。 mytable$的孩子只是tbody的孩子。

trcount3会在tr的上下文中查找所有tbody个mytable$的直接后代。前四个tr是tbody的直接后代，嵌套的tr也是tbody的直接后代。

$ .children（“selector”）vs $（“selector”，parent）vs“parent＆gt; child”选择器

2 个答案: