JQUERY selecting the first <a> in the first <td> of a <tr>

Question

I have the following markup:

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

Now, I've already hooked up a on click event using jquery $(".delete-btn") the problem is that the click event handler need the text in the first element (foo).

I'm already getthin it with this call:

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

but seriously... it looks wrong :-/ Maybe there is a better way to accomplish this?

Answer 1

我也不喜欢，但是...这正是您要的内容：

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

Answer 2

You can make use of jQuery's :first pseudo-selector.

In this instance, your entire selector would be:

• $('tr td:first a:first') (for the first <tr> only)
• $('tr').find('td:first a:first') (for every <tr> )

Example:

 $(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>