jquery - 如何从最接近的不同 获取 值

Question

我正在尝试从最近的 <tr> 获取第三个文本仅包含 <td> 之一中的指定文本(在本例中为“cat”)，当单击某些单击事件时。下面是我的示例表，我想要得到的是，每当单击“click1或2或3”时，第三个 <td>来自最近/上一个的文本 <tr>有“猫”的文本。

<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”，它应该只从最近的(前面)获取tiger<tr> 。如果点击“click2”或“click3”，它应该只获得马。我的代码给了我“老虎”和“马”，无论点击哪一个。

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

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

https://jsfiddle.net/5S5Pn/

Answer 1

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

JSFiddle:https://jsfiddle.net/5S5Pn/3/