jquery - 与 jQuery 的 .Closest 相反(顶部/最远？)

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').on('click', e => {
  var $topSubMenu = $(e.target).parents('.sub-menu').last();
});

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

如果您的意思是您想要“最接近的”子元素，那么您可以使用find('.submenu').first()，如下所示:

$('.elem').on('click', e => {
  var $topSubMenu = $(e.target).find('.submenu').first();
});

您可以在此处使用 children('.submenu') 而不是 find() - 这取决于您需要遍历 DOM 树的下层数。