$ .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的直接後代。