Question

我有一些简单的表（多个，都是class =“parent”），有多个<tr> 行。这些行中的<td>单元格具有自己的表格。我正在尝试定位第一个（父）表的<tr>行，如下所示：

HTML：

<table class="parent"> 
  <tr> <-- match with :first 
    <td> 
      <table> 
        <tr><td></td></tr> 
        <tr><td></td></tr> 
      </table> 
    </td> 
  </tr> 
  <tr> <-- match with :last 
    <td> 
      <table> <-- so ignore this child ..
        <tr><td></td></tr> 
        <tr><td></td></tr> <-- .. and do NOT match this <tr> with :last 
      </table> 
    </td> 
  </tr> 
</table>

jQuery的：

$('table.parent').each(function() { 
  $(this).find('tr:first').dostuff(); 
  $(this).find('tr:last').dostuff(); 
});

:first <tr>工作正常，因为它始终是父级的<tr>。但是当我尝试选择:last <tr>时，它将匹配嵌套表的最后<tr>，而不是父表的最后<tr>。我怎么能告诉jQuery只查看父表中的<tr>，并且不要在可能的子表中进一步搜索？

Answer 1

我建议稍微修改您的选择器以确保它适用于将<tbody>附加到表格（例如Firefox和Chrome）的浏览器：

//tested
$('table.parent > tbody').each(function() {
   $(this).children('tr:first').text('hello').css('background-color', 'red');
   $(this).children('tr:last').text('hello').css('background-color', 'red');
});

Answer 2

而不是.find()（找到所有后代）而不是只查找直接子项的.children()：

$(this).children('tr:first').dostuff();

jQuery的：首先和：最后一个元素的第一个子元素

2 个答案: