jQuery的:第一个和:最后一个元素的第一个孩子

jQuery的:第一个和:最后一个元素的第一个孩子

问题描述:

我有一些简单的表(多个,所有与class =“父母”)与多个<tr>行。这些行中的<td>单元格具有各自的表格。我想针对<tr>第一(父)表,就像这样:jQuery的:第一个和:最后一个元素的第一个孩子

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>,并且不要在可能的子表中进一步搜索?

代替.find()(其中找到所有后代)尽量.children()其中只找到直接子:

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

我建议稍微修改您的选择,以确保它可以在一个<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'); 
});