JQUERY die ersten <a> im ersten <td> ein <tr>

Question

Auswählen ich das folgende Markup habe:

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

Jetzt habe ich schon auf Click-Ereignis mit Jquery $(".delete-btn") das Problem ist, dass das Click-Ereignis angeschlossen Handler benötigt den Text im ersten Element (foo).

Ich getthin es bereits mit diesem Aufruf:

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

aber ernst ... es sieht falsch: -/Vielleicht ein besserer Weg gibt es, dies zu erreichen?

Answer 1

Ich mag diese auch nicht, aber ... es ist genau das, was Sie suchen:

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

Answer 2

Sie können :first Pseudo-Selektor Verwendung von jQuery machen.

• $('tr td:first a:first') (für die erste <tr> nur)
• $('tr').find('td:first a:first') (für jeden <tr>)

Beispiel:

In diesem Fall würde das gesamte Selektor sein

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