Question

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

和

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

Answer 1

不同之处在于第一个选择器完全在parents调用内，而第二选择器则不在。{/ p>

因此，第一个查找this匹配table:first > tbody > tr的所有父母。（换句话说，tr包含this中的table

第二个会找到匹配this的{{1}}的父级，然后直接在该父级的table:first内找到所有tr个。（换句话说，直接在父表中的所有tbody）

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>

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

2 个答案: