这两个选择器有什么区别？

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>