$ .children（“selector”）vs $（“selector”，parent）vs“parent> child”选择器

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> 

我想要做的是刚刚从mytable得到直接TR要素是什么。显然，有4个直接TR的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 

我错过了“>”之前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对象自身不匹配"tbody > tr"结果为0，因为没有符合该条件的直接子项。

还记得.children()是直接的孩子只。如果你想考虑所有儿童和儿童的孩子，那么你使用.find()或只是把标签放在主选择器。

---

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

这里是你问的mytable有直接父那tbody内的任何tr标签。其中有7个是因为中的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 S中的的mytable$直接后裔，然后得到的是哪些是你的四把tr一切都直接后裔。

trcount2寻找所有tr s，它们是mytable$的孩子中的tbody的直系后代。 mytable$的孩子只有一个tbody。

trcount3寻找所有trs，它们是在mytable$的上下文中的tbody的直接后代。前四个tr是tbody的直接后代，并且嵌套的tr也是tbody的直接后代。