查找与（不仅包含在）上下文相关的最接近的父级

Posted 2023-03-29

【中文标题】查找与（不仅包含在）上下文相关的最接近的父级

【英文标题】：Find closest parent in relation to (not just contained within) a context

【发布时间】：2011-02-25 14:49:15

【问题描述】：

用下面的html

<ul id="accordion">
    <li>
        <ul>
            <li><h3>title</h3></li>
        </ul>
    </li>
    <li>
        <ul>
            <li><h3>title</h3></li>
        </ul>
    </li>
    <li>
        <ul>
            <li><h3>title</h3></li>
        </ul>
    </li>       
</ul>

我将外部 ul 存储在一个变量中

var acc = $("#accordion")[0]  

在一般情况下，我只是传递了 DOM 元素，不一定要指定选择器

单击 h3 时，我想获取包含它的*** li。 在一般情况下，在手风琴 ul 和我要获取的元素之间以及要获取的元素和 h3 之间可能有任何类型的标记...但是我将拥有一个选择器这让我可以使用“>”选择器从手风琴中获取元素。

例如var items = $(">li", acc);

问题在于，当我从点击的 h3（点击处理程序中的“this”）开始时，很难找到具体的项目。

$(this).closest(">li", acc);

返回一个空的 jQuery（可能是一个错误？虽然在这种情况下很难定义“>”的含义，因为***元素是动态的）

$(this).parents(">li")

不允许设置上下文，因此可能会返回太多元素

有没有办法做我想做的事？

*edit: html 现在让问题更清晰了

【参考方案1】：

$(h3).closest(".item"); 怎么样？根据“最接近”的文档，它将从当前节点向上遍历 DOM，直到找到与您的选择器匹配的节点。

【讨论】：

这应该是所有必要的 - ">" 限定符在这种情况下是错误的，尤其是它左边没有任何东西。

但如果我的标记是

【参考方案2】：

反之，保证子关系：

acc.children('li').has(this);

【讨论】：

不错的解决方案，虽然很遗憾它遍历 acc 之外的 dom 以便在 acc 中找到一个元素

@wheresrhys，感谢您的提示-我只是想到了另一种方法，请参阅更新。

更好！我认为一般的问题是选择器可以包含“>”，但不一定（我正在编写一个相当通用的手风琴插件），因此还需要在选择器上使用正则表达式检查是使用您的方法还是最接近（），然后如果使用您的方法，则需要进一步分析选择器（例如“>li .target”）以从其余部分中分离出实际上是后代的部分选择器的...我认为应该在 jQuery 中完成的所有工作bugs.jquery.com/ticket/8383#comment:1

除非 find(">li") 和 childern("li") 做同样的事情吗？

@wheresrhys 这是与委托一起使用的一个好点。目前您可能只需要使用过滤器功能，因为它是最灵活的。

【参考方案3】：

$(">li",acc).has(this)

一般工作；在初始 jQuery 上设置上下文似乎是唯一在 jQuery 中使用“>”启动选择器的地方

【参考方案4】：

jQuery(this).parents('li:last');

【讨论】：

但是当 >li 包含 li 元素作为子元素时，这将不起作用