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

等级的“子<li>”时才会获得额外的nav__sub__item--active课程

以下是受影响的代码行：

感谢您的协助！

Answer 1

您可以使用.closest（）并搜索＆＃39; .primary-nav__item＆＃39;然后添加你的课程。

示例：

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

Answer 2

试试这个：

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

使用 parent（）来获取最外面的 li

的想法

完整代码：

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 3

您可以使用：

  

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

$('.primary-nav__item').addClass(function(idx, className) {
    if ($(this).find('li.nav__sub__item--active').length > 0) {
        return 'active';
    }
})

.active {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


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

Answer 4

jQuery的closest()函数效率更高：

$('.nav__sub__item--active').each(function() {
 $(this).closest('li.primary-nav__item').addClass('primary-nav__item--active');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <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 nav__sub__item--active">
            <a class="nav__sub__link" href="#">I'm a sub-link</a>
          </li>
        </ul>
      </div>
    </div>
  </li>
</ul>

Answer 5

您可以使用jQuery closest方法。它找到了具有特定选择器的第一个父元素。

＆＃13;

＆＃13;

$( document ).ready(function() {
    $('.nav__sub__item--active').closest('.primary-nav__item').addClass("active");
});

＆＃13;

.active {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


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

＆＃13;

＆＃13;

＆＃13;