Javascript jQuery-在父级上添加导航活动类

我想使用jQuery将活动类添加到

中，前提是该类包含具有特定类的嵌套“子元素”

以下是呈现的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 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>

最外层的

仅当它包含一个“child

”且其类的
导航子项--active

以下是受影响的代码行：

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


谢谢你的帮助
 您可以使用：

：函数返回一个或多个以空格分隔的类名，以添加到现有类名中


$（'.primary-nav\u item'）.addClass（函数（idx，类名）{
if（$（this.find（'li.nav\u sub\u item--active'）。长度>0）{
返回“活动”；
}
})
.active{
背景颜色：黄色；
}










jQuery的
最近（）函数
效率更高：


$（'.nav\u子项--active'）。每个（函数（）{
$（this）.closest（'li.primary-nav__项目'）.addClass（'primary-nav__项目--active'）；
});












您可以使用jQuery
最接近的方法。它使用特定的选择器查找第一个父元素


$（文档）.ready（函数（）{
$（'.nav_uu子_uu项--active'）。最近（'.primary-nav_u项'）。addClass（“active”）；
});
.active{
背景色：红色；
}










您可以使用.closest（）并搜索“.primary-nav\u item”，然后添加您的类

例如：

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