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树中的祖先来获取与选择器匹配的第一个元素。

first（）（所有级别） 将匹配元素集减少到集合

中的第一个元素

父母（）（所有级别） 获取当前匹配元素集中每个元素的祖先，可选择通过选择器进行过滤。

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

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

Answer 3

这是基于JavaScript的解决方案，基于closest()的{{3}}。

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

Answer 4

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

.menu

与jQuery的相反.Closest（Top / Far-Most？）

4 个答案: