如何从最接近的不同<tr>获取<td>值

Question

我点击某些点击事件时,我试图从最近的第三个文本中获取<tr>其中一个<td>(在这种情况下,"cat")中只包含指定文本的文本.下面是我的示例表,我想要的是,无论何时单击"click1或2或3",<td>最近/之前的第三个文本<tr>都有"cat"文本.

<table class="animals"> <tr> <td> cat </td> <td> dog </td> <td> tiger </td> </tr> <tr> <td> dog-1 </td> <td> dog-2 </td> <td> dog-3 </td> <td> <a href="#" class="drop">click1</a> </td> </tr> <tr> <td> cat </td> <td> mouse </td> <td> horse </td> </tr> <tr> <td> lion </td> <td> zebra </td> <td> camel </td> <td> <a href="#" class="drop">click2</a> </td> </tr> <tr> <td> goat </td> <td> cow </td> <td> sheep </td> <td> <a href="#" class="drop">click3</a> </td> </tr> </table>

如果单击"click1",它应该只从最近的(前面)获得虎<tr>.如果点击"click2"或"click3",它应该只能得到马.我的代码给了我"虎"和"马",无论点击哪一个.

$('.drop').click(function() {
  var val = $(this).closest('table').find('tr:contains("cat")').find('td:eq(2)').text();  
  alert(val);}
);  

任何帮助解决这个问题将不胜感激.

http://jsfiddle.net/5S5Pn/

Answer 1

$(this).closest('table').find('tr:contains("cat"):lt('+$(this).closest('tr').index()+'):last').find('td:eq(2)').text();  

jsFiddle:http://jsfiddle.net/5S5Pn/3/