javascript - jQuery - 在父级上添加导航事件类

Question

我想使用 jQuery 将事件类添加到 <li>仅当它包含具有特定类的嵌套“子元素”时。

这是呈现的 HTML 代码:

<li class="primary-nav__item primary-nav__item--sub js-header-sub-link">
  <a class="primary-nav__link nav__link--sub js-header-sub-link-a" href="/collections/books">Books</a>
  <div class="nav__sub" id="sub-3">
    <div class="nav__sub-wrap">
      <ul class="nav__sub__items o-list-bare">
        <li class="nav__sub__item">
          <a class="nav__sub__link" href="#">I'm a sub-link</a>
        </li>
        <li class="nav__sub__item nav__sub__item--sub js-header-sub-t-link nav__sub__item--active">
          <a class="nav__sub__link" href="#">I'm a sub-link</a>
        </li>
        <li class="nav__sub__item">
          <a class="nav__sub__link" href="#">I'm a sub-link</a>
        </li>
      </ul>
    </div>
  </div>
</li>

这是我希望发生的事情:

最外层<li>将获得一个额外的类 primary-nav__item--active仅当它包含一个“ child <li>”，其类别为 nav__sub__item--active

以下是受影响的代码行:

感谢您的协助!

Answer 1

您可以使用 .closest() 并搜索“.primary-nav__item”，然后添加您的类。

例子:

$('.nav__sub__item--active').closest('.primary-nav__item').addClass('primary-nav__item--active')