Question

<div id="m101">
    <table class="tablec" width="80%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><a href="#"><span class="name">My Name</span></a></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><a href="#"><span class="clickme">clickme</span></a></td>
  </tr>
</table>
</div>

Which selector should I use to capture the content of “name” if clickme is clicked? There are more than one of those tables with the same classes, but the surrounding divs are unique. The name is different each time.

I’ve been experimenting the with parent, parents and closest functions so far without luck.

 $(".clickme").click(function(){
    var name = $(this).closest('.name').text();
alert(name);
 });

Answer 1

You can traverse the tree up until you hit a <table>:

var name = $( this ).closest( 'table' ).find( '.name' ).text();