jQuery中最近的祖先节点

Posted 2023-05-09

【中文标题】jQuery中最近的祖先节点

【英文标题】：nearest ancestor node in jQuery

【发布时间】：2010-09-17 02:38:29

【问题描述】：

在我的 javascript 经验中，我发现这是一个非常常见的任务“搜索具有某些条件（标签名称、类...）的元素的最近祖先”。 jquery 的 parents() 方法可以完成这项工作吗？ parents() 的返回元素的顺序是可预测的吗？是自上而下还是自下而上？ 目前我使用这个实用功能：

function ancestor(elem, selector) 
  var $elem = $( elem ).parent();
  while( $elem.size() > 0 ) 
    if( $elem.is( selector ) ) 
    return $elem;
    else
       $elem = $elem.parent();
  
  return null;

谁能告诉我是否有聪明的方法来完成这项工作？

【参考方案1】：

编辑：从 jQuery 1.3 开始，它被内置为 closest() 函数。例如：$('#foo').closest('.bar');

---

是的 - parents() 遍历树。

<div id="a">
    <div id="b">
        <p id="c">
            <a id="d"></a>
        </p>
    </div>
</div>

$('#d').parents("div:first"); 将选择 div b。

【讨论】：

当心，John Resig 计划更改 .parents() 以按源顺序返回元素。在论坛主题围绕返回集合中的元素顺序旋转后，请参阅 John 本人提交的此错误：bugs.jquery.com/ticket/5994

幸运的是，jQuery 团队已经用wontfix 关闭了这张票。所以 .parents() 应该再次被认为是稳定的。

【参考方案2】：

添加到@nickf的答案：

jQuery 1.3 用closest 简化了这个任务。

给定一个 DOM：

<div id="a">
    <div id="b">
        <p id="c">
            <a id="d"></a>
        </p>
    </div>
</div>

你可以这样做：

$('#d').closest("div"); // returns [ div#b ]

[Closest 返回一个] 集合 包含最近父元素的元素 与指定匹配的元素 选择器，起始元素 包括在内。

【讨论】：

.closest() 的问题在于它从当前元素开始。来自jQuery site：“获取与选择器匹配的第一个元素，从当前元素开始，向上遍历 DOM 树。”一般来说，这不会正确回答问题，因为它只是在寻找祖先元素。

【参考方案3】：

您应该使用closest，因为如果您使用多个元素，parents 不会给您预期的结果。例如，假设你有这个：

    <div id="0">
        <div id="1">test with <b>nested</b> divs.</div>
        <div id="2">another div.</div>
        <div id="3">yet <b>another</b> div.</div>
    </div>

并且您想将一个类添加到具有<b> 元素作为其直接子元素的 div（即 1 和 3）。如果你使用$('b').parents('div')，你会得到div 0、1和3。如果你使用$('b').parents('div:first')，你只会得到div 1。要得到1和3，而不是0，你必须使用$('b').closest(elem)。

【讨论】：

.closest() 的问题在于它从当前元素开始。来自jQuery site：“获取与选择器匹配的第一个元素，从当前元素开始，向上遍历 DOM 树。”一般来说，这不会正确回答问题，因为它只是在寻找祖先元素。

【参考方案4】：

closest() 从当前元素开始，如果您要查找的父元素与当前元素具有相同的标签（例如，两者都是 div），请使用 parent().closest()