与 jQuery 的 .Closest (Top/Far-Most?) 相反答案

【问题标题】：Opposite to jQuery's .Closest (Top/Far-Most?)与 jQuery 的 .Closest (Top/Far-Most?) 相反
【发布时间】：2013-02-09 11:27:12
【问题描述】：

我的代码包含许多共享相同类名的子菜单。

这是一个结构：

.menu
  .sub-menu
  .sub-menu
    .sub-menu
    .sub-menu
  .sub-menu
    .sub-menu
      .elem
      .elem
  .sub-menu

请注意，.sub-menu 的深度可能是无限的。

那么我该如何实现：当点击.elem 时，我想向上遍历DOM，直到到达最顶端的.sub-menu 并对其应用样式。我知道.closest() 和.parent() 和.find()，但我不知道jQuery 是否有.topMost(selector) 之类的功能？

我能想到的唯一方法可能是运行一个循环并遍历新元素的.closest('.sub-menu')，直到它的长度为零（这个类没有更多的父级，所以它必须是最顶层的）。但是，我认为应该有一个更实用的方法。

【问题讨论】：

标签： jquery dom parent closest

【解决方案1】：

这个问题有点误导，因为 .closest() 可能会被误解。实际上，这意味着搜索树，直到找到第一个匹配项。所以相反的是向下搜索直到找到匹配并且该方法是first().

要查找所有个后代，可以使用find()。 find() 的反义词是parents()。

closest()（所有级别） 对于集合中的每个元素，通过测试元素本身并向上遍历其在 DOM 树中的祖先来获取与选择器匹配的第一个元素。

first()（所有级别） 将匹配元素的集合减少到集合中的第一个

parents()（所有级别） 获取当前匹配元素集中每个元素的祖先，可选地由选择器过滤。

parent()（仅限下一级） 获取当前匹配元素集中每个元素的父元素，可选地由选择器过滤。

find()（所有级别）获取当前匹配元素集中每个元素的后代，由选择器、jQuery 对象或元素过滤。

【讨论】：

如果您认为标题可以为未来的读者阐明问题的目的，请随时将标题编辑为更合适的标题。
我很喜欢它。它是我用谷歌搜索的。刚刚发布它以供将来参考:)
这对于 find() 是最接近的 () 的反义词是不正确的。 find() 将查找树中的所有元素。所以最接近（）的反面，向下搜索，将是 find().first()。
酷！拿走了反对票，转而投了赞成票。这应该对其他看到这篇文章的人有所帮助。

【解决方案2】：

假设你想要'最远'的父元素，你可以使用'最接近的相反'，你可以使用parents().last()，像这样：

$('.elem').click(function() {
    var $topSubMenu = $(this).parents('.sub-menu').last();
});

注意，当 jQuery 遍历 DOM 时，您希望数组中的最后一个元素，因此顶级项目将是集合中的最后一个。

【讨论】：

【解决方案3】：

这是一个仅使用 JavaScript 的解决方案，基于 polyfill for closest()。

function furthest(s) {
    var el = this.parentElement || this.parentNode;
    var anc = null;

    while (el !== null && el.nodeType === 1) {
        if (el.matches(s)) anc = el;
        el = el.parentElement || el.parentNode;
    }
    return anc;
}

【讨论】：

我添加了元素作为参数，因为 this.parentElement 不起作用

【解决方案4】：

.closest() 实际上可以在这里使用，通过传递一个将匹配元素限制为.menu 的直接后代的选择器：

$('.elem').click(function() {
    let $topSubMenu = $(this).closest('.menu > .sub-menu');
});

【讨论】：