這兩個選擇器有什麼區別？

Question

$(this).parents('table:first > tbody > tr') 

而且

$(this).parents('table:first').children('tbody').children('tr') 

Answer 1

不同的是，第一選擇是完全在parents呼叫內，而第二個則不是。

因此，第一個查找匹配table:first > tbody > tr的所有父母this。 （換言之，含有trthis即在第一table）

第二個將找到的this相匹配table:first母體，然後直接在tbody s表示母體的發現所有的tr S的。 （換句話說，所有的tr小號直接父表中的）

Answer 2

也許一個例子可以幫助...開始了這個HTML

<table border=1> 
<thead> 
    <th>Outter Table</th> 
</thead> 
<tbody> 
    <tr><td>1</td></tr> 
    <tr> 
    <td> 
    <table border=1 width=100> 
    <thead> 
     <th>Inner Table</th> 
    </thead> 
    <tbody> 
     <tr><td>2a</td></tr> 
     <tr><td class="test">2b</td></tr> 
     <tr><td>2c</td></tr> 
    </tbody> 
    </table> 
    </td> 
    </tr> 
    <tr><td>3</td></tr> 
</tbody> 
</table> 

應用此腳本：

$('.test').parents('table:first > tbody > tr').addClass('foo'); 
$('.test').parents('table:first').children('tbody').children('tr').addClass('bar'); 

結果：

<table border="1"> 
<thead> 
    <th>Outter Table</th> 
</thead> 
<tbody> 
    <tr class="foo"><td>1</td></tr> 
    <tr class="foo"> 
    <td> 
    <table width="100" border="1"> 
    <thead> 
     <th>Inner Table</th> 
    </thead> 
    <tbody> 
     <tr class="bar"><td>2a</td></tr> 
     <tr class="bar"><td class="test">2b</td></tr> 
     <tr class="bar"><td>2c</td></tr> 
    </tbody> 
    </table> 
    </td> 
    </tr> 
    <tr class="foo"><td>3</td></tr> 
</tbody> 
</table>