使用jQuery递归获取与类过滤器匹配的元素的第一个父元素答案

【问题标题】：Use jQuery to recursively get the first parent of an element matched by a class filter使用jQuery递归获取与类过滤器匹配的元素的第一个父元素
【发布时间】：2012-01-04 04:30:48
【问题描述】：

我有一种情况，我需要引用下一个 DIV，它是我当前 DIV 的父级，但与特定的类名匹配。

<div class="container">
    <div class="something">test</div>
    <div class="something">test</div>
    <div class="something" onclick="$(use jquery to find parent with class container)">test</div>
</div>

这很容易，但也可以是这样的：

<div class="container">
    <div class="someotherthing">
        <div class="something">test</div>
        <div class="something">test</div>
        <div class="something" onclick="$(use jquery to find parent with class container)">test</div>
    </div>
</div>

这意味着我正在寻找一种解决方案，它递归地遍历 dom，直到找到与某个 CSS 类匹配的给定元素的父元素。

我想知道 jQuery 是否可以在一次性调用中做到这一点。

【问题讨论】：

您所要求的最好描述为祖先而不是父母。 Parent 通常表示直系祖先。

标签： jquery css dom jquery-selectors traversal

【解决方案1】：

$('.something').parents('.container');

这会做你想做的。

您应该查看traversing the DOM 上的文档。

【讨论】：

【解决方案2】：

.closest() 方法应该处理这个问题：

 $(this).closest(".someclass")

【讨论】：

【解决方案3】：

您可以使用.parents([selector]) 选择任何元素的所需父级：

$('.something').on('click', function () {
    var $parent = $(this).parents('.container:first');
});

当单击任何具有something 类的元素时，这将选择具有container 类的第一个父元素。

请注意，.on() 是首选的 jQuery 1.7 版本的 .bind() 函数。

.parents() 的文档：http://api.jquery.com/parents

【讨论】：

.bind() 不折旧。
供参考上述评论，forum.jquery.com/topic/delegate-vs-on#14737000002878044 和文档。
@KevinB 我用了错误的措辞，这是“首选”方法：...we recommend that you use .on() for any new jQuery project where you know version 1.7 or higher is in use。答案已更新，感谢您指出这一点。

【解决方案4】：

看看 jQuery closest 方法，它获取与选择器匹配的第一个元素，从当前元素开始，向上遍历 DOM 树。

【讨论】：

感谢您的解释。 Closest 将返回第一个父级，而 parents() 将返回所有匹配的父级。

【解决方案5】：

$('.something').parents('.container');

【讨论】：