¿Cuál es la diferencia entre estos dos selectores?

Question

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

Y

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

Answer 1

La diferencia es que el primer selector está enteramente dentro de la llamada parents, mientras que el segundo no lo es.

Por lo tanto, el primero busca a todos los padres de this que coincidan con table:first > tbody > tr. (En otras palabras, un tr que contiene this que se encuentra en la primera table)

El segundo se encuentra la matriz de this que coincide table:first, a continuación encontrará toda la tr s directamente dentro tbody s de ese padre. (En otras palabras, toda la tr s directamente dentro de la tabla primaria)

Answer 2

Quizás Un ejemplo ayudará a ... empezar con este código 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> 

Aplicar este script:

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

Resultado:

<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>