jQuery's: first и: last на первых дочерних элементах

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> s, которые находятся в родительской таблице, и больше не искать в возможных дочерних таблицах?

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();