Question

常规：

如何在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中是否存在遵循此逻辑的选择器语法：

“这是一个元素，现在找到与某些选择标准相匹配的最接近的祖先并将其返回”

由于

Answer 1

那将是closest：

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

Answer 2

我更喜欢使用closest作为@Kobi指出（+1），因为它似乎是最简洁的方法。需要指出的是，您还可以使用parents：

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

Answer 3

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

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

或者你可以使用最接近的答案。

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

Answer 4

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

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

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

如何选择与选择器匹配的第一祖先？

4 个答案: