jQueryの：要素の最初の子要素の最初と最後の部分

Question

私はいくつかの単純なテーブル（複数、すべてclass = "parent"）を複数の<tr>行で持っています。これらの行内の<td>セルには独自のテーブルがあります。

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>行をターゲットにしようとしていますそれは常に親の<tr>です。しかし、:last <tr>を選択しようとすると、最後の<tr>ではなく、ネストした表の最後の<tr>と一致します。 jQueryに親テーブルにある<tr>だけを見て、可能な子テーブルでこれ以上検索しないようにするにはどうすればよいですか？

Answer 1

の代わりに（すべて子孫を見つけた）.find()のみ直接の子を見つけた.children()を試してみてください。

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

Answer 2

私はそれがテーブルに<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'); 
});