是否有 jQuery 选择器/方法来查找特定的父元素 n 级？

Posted 2023-03-05

【中文标题】是否有 jQuery 选择器/方法来查找特定的父元素 n 级？

【英文标题】：Is there a jQuery selector/method to find a specific parent element n levels up?

【发布时间】：2010-10-16 11:44:06

【问题描述】：

考虑以下 html。如果我有对 元素的 JSON 引用，如何在这两种情况下获取对外部 元素的引用

<table id="my-table">
    <tr>
        <td>
            <button>Foo</button>
        </td>
        <td>
            <div>
                <button>Bar</button>
            </div>
        </td>
    </tr>
</table>

<script type="text/js">
    $('#table button').click(function()
        //$(this).parent().parent() will work for the first row
        //$(this).parent().parent().parent() will work for the second row
        //is there a selector or some magic json one liner that will climb
        //the DOM tree until it hits a TR, or do I have to code this myself
        //each time?            
        //$(this).????
    );
</script>

我知道我可以对每种情况进行特殊处理，但我更感兴趣的是“不管你有多深，爬树直到找到元素 X”风格的解决方案。像这样的东西，但更喜欢 jQuery/less-verbose

var climb = function(node, str_rule)
    if($(node).is(str_rule))
        return node;
    
    else if($(node).is('body'))
        return false;
    
    else
        return climb(node.parentNode, str_rule);
    
;  

我知道 parent(expr) 方法，但据我所见，它允许您向上过滤父母并且在找到 expr 之前不要爬树（我希望代码示例证明我错了）

【问题讨论】：

【参考方案1】：

parents 函数可以满足您的需求：

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

【讨论】：

当然，谢谢！这就是“编辑其他人的帖子”权限的用途；）

哈，这很有趣。我想知道为什么 Visual jQuery 列出了 parent(expr) 两次；原来我在结尾处完全隔开了 s。

谢谢 Seb，我根本不知道这个，它真的很有用。当然胜过一堆'parent().parent()....'

【参考方案2】：

另外，如果您使用的是 jQuery 1.3+，您可以使用 closest 方法

$(this).closest("tr");

【讨论】：

只是想补充一点，closest 和parents 非常相似，但略有不同。你可以阅读更多here。总的来说，我认为closest 方法对于这种特定场景更有效。

hmm，这个函数名很好理解。

【参考方案3】：

不是 jQuery，但这个选项效果更好

node.contains(otherNode)

Node.contains() 方法返回一个布尔值，指示是否 一个节点是否是给定节点的后代

https://developer.mozilla.org/en/docs/Web/API/Node/contains