获取父元素的第n个子元素

Question

我有一张表格，我需要每行的前两个单元格可点击(而不是整行)。当我点击第一个或第二个单元格时，我想要获取同一行第三个单元格的值。 为了澄清，当我点击 a1 时，我希望弹出窗口显示 c1，如果我点击 b2，我希望它显示 c2，如果我点击 c3，我不想发生任何事情。

正如您所看到的，我的 alert($(this).parent(':nth-child(3)').text()); 无法工作... 我该怎么做才能实现这个功能？

$('td:nth-child(-n+2)').on("click", function(){
   alert($(this).parent(':nth-child(3)').text()); //Doesn't work
});

td{
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
    <tr>
        <td>a1</td>
        <td>b1</td>
        <td>c1</td>
    </tr>
    <tr>
        <td>a2</td>
        <td>b2</td>
        <td>c2</td>
    </tr>
    <tr>
        <td>a3</td>
        <td>b3</td>
        <td>c3</td>
    </tr>
</table>

- Johan Hjalmarsson

---

“演示”必须在问题本身中。 - A. Wolff

@A.Wolff 嗯，什么？请详细说明，我不明白你的意思。 - Johan Hjalmarsson

你必须在问题本身发布所有相关的代码，否则你可能会得到负评（我猜）。编辑：无论如何，这就是你想要的内容：“$(this).parent().children(':nth-child(3)').text()”。 - A. Wolff

更好了吗？我制作了一个超级简洁的示例，所以没有太多的代码需要发布。此外，问题已经清楚地陈述了（当前行为，期望的行为）。 - Johan Hjalmarsson

谢谢更新，现在我们可以点赞它了... :) - A. Wolff

仅使用 jsFiddle 存在的问题是，一旦链接失效，您的问题就没有意义了。 - A. Wolff

Answer 1

你需要使用.closest('tr')来选择父级，并使用.find()来选择td:nth-child(3)

$('td:nth-child(-n+2)').on("click", function(){
   alert($(this).closest('tr').find('td:nth-child(3)').text());
});

演示

- Mohamed-Yousef

---

嘿，那个用户因投票不规范而被暂停了。 - Anoop Joshi P

@AnoopJoshi，这怎么样？我不知道为什么他要寻求点赞，就像我们中的任何人一样，有时候更多地希望能够提供帮助而不是点赞。我对此感到不满。正如@A Wolff之前所说，也许那不是复制/粘贴的代码，也许是他自己的代码，但不幸的是，我发布得更快了 :( 。 - Mohamed-Yousef

他因投票不规则而被暂停。我认为他可能从一些虚假用户那里得到了帮助，以获得更多的赞同/使用了自己的重复身份来获得赞同。这不是因为他比你慢。 :) - Anoop Joshi P

@AnoopJoshi 真是个打击 :( .. 我以为我足够快啦 :) :) .. 谢谢你让我知道 :) - Mohamed-Yousef

他被暂停一周。之后，他将恢复他的积分，除了那些来自虚假身份证的积分。 - Anoop Joshi P

Answer 2

使用这个。

$(this).parent().children(':nth-child(3)').text()

选择父级元素，然后再选择其子元素。

JsFiddle

- Schneyer

Answer 3

您可以使用

$('td:lt(2)').on("click", function () {
    alert($(this).parent().find("td:eq(2)").text()); //Doesn't work
});

Fiddle

• lt(2)会选择索引小于2的指定元素。
• eq(2)会选择索引等于2的元素。

- Anoop Joshi P

Answer 4

这对我有用：

$('table tr').each(function(){
    $(this).find('td:lt(2)').on("click", function () {
           var text = $(this).parent().find("td:eq(2)").text();
           console.log(text);
     });
 });

- kostova