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

Question

我有一段代码，里面有很多共享相同类名的子菜单。

这是一个结构：

.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')，直到它的长度为零(这个类没有更多的父类，所以它必须是最顶层的)。然而，我认为应该有一种更实际的方法来解决这个问题。

Answer 1

假设您想要“最远”的父元素，您可以使用parents().last()，如下所示：

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

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

Answer 2

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

要查找所有子代，可以使用find()。find()的对立面是parents()。

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

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

parents() (all Level)获取当前匹配元素集中每个元素的祖先，可选地由选择器过滤。

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

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

Answer 3

这是一个基于closest()的polyfill的纯JavaScript解决方案。

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;
}