What's the difference between these two selectors?

Question

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

And

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

Answer 1

The difference is that the first selector is entirely within the parents call, whereas the second one isn't.

Therefore, the first one looks for all parents of this which match table:first > tbody > tr. (In other words, a tr containing this that is in the first table)

The second one will find the parent of this which matches table:first, then find all of the trs directly within tbodys of that parent. (In other words, all of the trs directly inside the parent table)

Answer 2

Maybe an example will help... start out with this 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>

Apply this script:

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

Result:

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