与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

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

要找到所有可能使用的后代find().相反的find()是parents().

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

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

parents()(所有级别) 获取当前匹配元素集中每个元素的祖先,可选择通过选择器进行过滤.

parent()(仅限下一级) 获取当前匹配元素集中每个元素的父元素,可选择通过选择器进行筛选.

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

Answer 2

假设"最接近的对面"你想要'最远'的父元素,你可以使用parents().last(),如下所示:

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

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