如何选择匹配选择器的第一个祖先？答案

【问题标题】：How To Select First Ancestor That Matches A Selector?如何选择匹配选择器的第一个祖先？
【发布时间】：2011-02-21 11:03:40
【问题描述】：

一般：

如何在 jQuery 中选择元素的第一个匹配祖先？

示例：

获取这个 HTML 块

<table>
    <tbody>
        <tr>
            <td>
                <a href="#" class="remove">Remove</a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="#" class="remove">Remove</a>
            </td>
        </tr>
    </tbody>
</table>

我可以使用这个 jQuery 代码点击“删除”来删除表格中的一行：

$('.remove').click(function(){
    $(this).parent().parent().hide();
    return false;
});

这可行，但它非常脆弱。例如，如果有人将<a> 放入<div>，它就会中断。 jQuery 中是否有遵循此逻辑的选择器语法：

“这是一个元素，现在找到与某些选择条件匹配的最近的祖先并返回它”

谢谢

【问题讨论】：

标签： jquery jquery-selectors

【解决方案1】：

那就是closest:

$(this).closest('tr').hide();

【讨论】：

当我允许时，我会接受这个答案。你太快了。谢谢

【解决方案2】：

我更喜欢使用closest，正如@Kobi 指出的那样（+1），因为这似乎是最简洁的方式。需要指出的是，您也可以使用parents：

$(this).parents("tr:first")

【讨论】：

不错的选择。我刚刚在选择器中发现了:first 位，因为parents()（与closest() 不同）返回多个元素——所有匹配元素从直接父级向上。

【解决方案3】：

您可以将选择器传递给我相信的父参数。

$('.remove').click(function(){
  $(this).parents("tr:first").hide();
  return false;
});

或者您可以使用最接近的方法，如另一个答案所示。

$('.remove').click(function(){
  $(this).closest("tr").hide();
  return false;
});

【讨论】：

不，parent 只查看直接父级而不是所有祖先。
parent 遍历 DOM 树的单层，你需要 parents 代替。此外，过滤器表达式应为tr:first（无空格）。
@karim 谢谢，我回答时还没有咖啡。修改以反映。

【解决方案4】：

假设您使用的是 jQuery 1.4，您可以使用.parentsUntil()，它将返回所有祖先，但不包括选定的祖先。

所以在你的情况下，我会选择这样的东西：

$('.remove').click(function(){
    $(this).parentsUntil("tr").parent().hide();
    return false;
});

【讨论】：