Question

Okay i have a HTML TABLE , with 4 TDs in a TR(tow) as shown in the code below:

<table>
   <tr>
      <td class="1">Lemon</td>
      <td class="2">Orange</td>
      <td class="3">Tea</td>
      <td class="4"><a href=#" class="get">Get</a></td>
   </tr>

   <tr>
      <td class="1">Apple</td>
      <td class="2">Tomato</td>
      <td class="3">Pineapple</td>
      <td class="4"><a href="#" class="get">Get</a></td>
   </tr>
</table>

How can i use jQuery to make , when a#GET is clicked , it will go get the class 1 , 2 , 3 values which is in the same table row as it.

For example , i click on the a#get in the first row , i will get Lemon , orange , tea as the results.

I use the jQuery code below but it’s not working:

$(document).ready(function(){
 $('a#get').click(function(e){
    e.preventDefault();
    var val1 = $(this).parent().find('td.1').html();
    var val2 = $(this).parent().find('td.2').html();
    var val3 =  $(this).parent().find('td.3').html();
    alert(val1 + val2 + val3);
 });
});

Any ideas on how can i do this or what i’m doing wrong?

thanks!

Answer 1

You’re calling .find() inside the td element, while you actually need to call it in tr, which is one level higher.

Replace $(this).parent().find(...) with $(this).parent().parent().find(...).

(And you should make your IDs unique, as pimvdb suggested.)