JQUERY選擇中的<tr>

Question

我有以下標記的第一​​第一：

<tr> 
    <td> 
     <a>foo</a></td> 
    <td>bar</td> 
    <td> 
     <a class="delete-btn">delete</a> 
    </td> 
</tr> 

現在，我已經迷上了使用jQuery $(".delete-btn")一個上click事件的問題是，點擊事件處理程序需要第一個元素（foo）中的文本。

我已經使用該調用getthin它：

$(this).closest("tr").children().first().children().first("a") 

但嚴重...它看起來錯了： - /也許有更好的方式來做到這一點？

Answer 1

我不喜歡這樣，但...這是你在尋找什麼：

$(this).closest("tr").find("> td:first-child > a"); 

Answer 2

您可以使用jQuery的:first僞選擇的。

在這種情況下，你的整個選擇應該是：

• $('tr td:first a:first')（對於第一隻<tr>）
• $('tr').find('td:first a:first')（每一個<tr>）

例子：

$(document).ready(function(){ 
 

 
    $('.delete-btn').click(function(){ 
 
     $('tr').find('td:first a:first').hide(); 
 
    }) 
 

 
});

table, tr, td { 
 
border: 1px solid rgb(191,191,191); 
 
border-collapse: collapse; 
 
} 
 

 
td { 
 
padding: 12px; 
 
} 
 

 
.delete-btn { 
 
cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table> 
 
<tr> 
 
<td><a>foo</a></td> 
 
<td>bar</td> 
 
<td><a class="delete-btn">delete</a></td> 
 
</tr> 
 
<tr> 
 
<td><a>foo</a></td> 
 
<td>bar</td> 
 
<td><a>baz</a></td> 
 
</tr> 
 
</table>