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

【问题标题】：how to get <td> value from the closest different <tr>如何从最近的不同 <tr> 获取 <td> 值
【发布时间】：2014-09-23 22:05:53
【问题描述】：

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

<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> 获取 tiger。如果 "click2" 或 "click3" 被点击，它应该只得到 horse。我的代码给了我“老虎”和“马”，无论哪个被点击。

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

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

https://jsfiddle.net/5S5Pn/

【问题讨论】：

标签： jquery html jquery-selectors

【解决方案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/

【讨论】：

请注意，我真的不相信这实际上是最有效的方法，但是，嘿，它有效。
这确实有效..但就像你说的，我想知道是否还有其他有效的方法......真的很好！不过谢谢！现在将使用它;)

【解决方案2】：

这是一种可能的解决方案：

$('.drop').click(function() {
    var val = $(this).parent().parent().prev().find('td:eq(2)').text();
    alert(val);  
});

虽然不是很漂亮。与您的 HTML 布局紧密相关。您可能希望为每个 tr 标签添加一个带有索引的 id 或类。

【讨论】：

实际上@jcaron 的答案更好。不过，您可能不希望您的 javascript 如此依赖于您的 html 布局。非常脆弱。