主页 / 问题 / 711426
Accepted
siberian
Asked:2020-08-28 18:05:53 +0000 UTC2020-08-28 18:05:53 +0000 UTC

如果子元素有类，则将类添加到父元素

  • 772

有一个这样的菜单结构：

<li id="menu-item-264" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nav-item"><a class="nav-link" href="">title</a>
 <ul class="sub-menu">
   <li id="menu-item-300" class="menu-item menu-item-type-post_type menu-item-object-page nav-item"><a class="nav-link" href="">title1</a></li>
   <li id="menu-item-299" class="menu-item menu-item-type-post_type menu-item-object-page menu-active-sub-item nav-item"><a class="nav-link" href="">title2</a></li>
 </ul>

根据条件，有必要检查类menu-active-sub-itemy liinside的存在sub-menu。

如果有类，则需要current-menu-parent在li顶层添加一个类。

此功能无法按预期工作：

if ( $('li.nav-item').hasClass('menu-active-sub-item') ) {
    $(this).parents('li.menu-item').addClass('current-menu-parent');

}

添加一个类如何正确？

UPD

我的选择是这样的：

if ( $('li.menu-active-sub-item') ) {
    $('li.menu-active-sub-item').parents('li.menu-item').addClass('current-menu-parent');
}
javascript

3 个回答

  1. Best Answer

    无需遍历所有li.nav-item这些只是为了找到具有current-menu-parent.

    相反，您需要立即寻找必要的元素，带上他们的父母，并分配所需的班级。

    它可能看起来像这样：

    $('li.nav-item.menu-active-sub-item').parents('li.menu-item').addClass('current-menu-parent');

    例子：

    $('li.nav-item.menu-active-sub-item').parents('li.menu-item').addClass('current-menu-parent');
    .menu-active-sub-item,
.menu-active-sub-item>.nav-link,
.current-menu-parent>.nav-link {
  color: #f00;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-264" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nav-item"><a class="nav-link" href="">title</a>
  <ul class="sub-menu">
    <li id="menu-item-300" class="menu-item menu-item-type-post_type menu-item-object-page nav-item"><a class="nav-link" href="">title1</a></li>
    <li id="menu-item-299" class="menu-item menu-item-type-post_type menu-item-object-page menu-active-sub-item nav-item"><a class="nav-link" href="">title2</a></li>
  </ul>
</li>
<li id="menu-item-264" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nav-item"><a class="nav-link" href="">title</a>
  <ul class="sub-menu">
    <li id="menu-item-300" class="menu-item menu-item-type-post_type menu-item-object-page nav-item"><a class="nav-link" href="">title1</a></li>
    <li id="menu-item-299" class="menu-item menu-item-type-post_type menu-item-object-page nav-item"><a class="nav-link" href="">title2</a></li>
  </ul>
</li>
<li id="menu-item-264" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nav-item"><a class="nav-link" href="">title</a>
  <ul class="sub-menu">
    <li id="menu-item-300" class="menu-item menu-item-type-post_type menu-item-object-page nav-item"><a class="nav-link" href="">title1</a></li>
    <li id="menu-item-299" class="menu-item menu-item-type-post_type menu-item-object-page nav-item"><a class="nav-link" href="">title2</a></li>
  </ul>
</li>
<li id="menu-item-264" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nav-item"><a class="nav-link" href="">title</a>
  <ul class="sub-menu">
    <li id="menu-item-300" class="menu-item menu-item-type-post_type menu-item-object-page nav-item"><a class="nav-link" href="">title1</a></li>
    <li id="menu-item-299" class="menu-item menu-item-type-post_type menu-item-object-page menu-active-sub-item nav-item"><a class="nav-link" href="">title2</a></li>
  </ul>
</li>

    • 5

  2. 在您的代码中，$(this)您找到的不是元素，而是整个文档（如果您的措辞有误，请同事纠正我）。

    您需要通过 来检查几个元素.each()，然后它$(this)已经引用了您正在检查的元素：

    $('li.nav-item').each(function() {
  if ($(this).hasClass('menu-active-sub-item')) {
    $(this).parents('li.menu-item').addClass('current-menu-parent');
  }
});
    .menu-active-sub-item,
.menu-active-sub-item>.nav-link,
.current-menu-parent>.nav-link {
  color: #f00;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-264" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nav-item"><a class="nav-link" href="">title</a>
  <ul class="sub-menu">
    <li id="menu-item-300" class="menu-item menu-item-type-post_type menu-item-object-page nav-item"><a class="nav-link" href="">title1</a></li>
    <li id="menu-item-299" class="menu-item menu-item-type-post_type menu-item-object-page menu-active-sub-item nav-item"><a class="nav-link" href="">title2</a></li>
  </ul>
</li>
<li id="menu-item-264" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nav-item"><a class="nav-link" href="">title</a>
  <ul class="sub-menu">
    <li id="menu-item-300" class="menu-item menu-item-type-post_type menu-item-object-page nav-item"><a class="nav-link" href="">title1</a></li>
    <li id="menu-item-299" class="menu-item menu-item-type-post_type menu-item-object-page nav-item"><a class="nav-link" href="">title2</a></li>
  </ul>
</li>
<li id="menu-item-264" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nav-item"><a class="nav-link" href="">title</a>
  <ul class="sub-menu">
    <li id="menu-item-300" class="menu-item menu-item-type-post_type menu-item-object-page nav-item"><a class="nav-link" href="">title1</a></li>
    <li id="menu-item-299" class="menu-item menu-item-type-post_type menu-item-object-page nav-item"><a class="nav-link" href="">title2</a></li>
  </ul>
</li>
<li id="menu-item-264" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children nav-item"><a class="nav-link" href="">title</a>
  <ul class="sub-menu">
    <li id="menu-item-300" class="menu-item menu-item-type-post_type menu-item-object-page nav-item"><a class="nav-link" href="">title1</a></li>
    <li id="menu-item-299" class="menu-item menu-item-type-post_type menu-item-object-page menu-active-sub-item nav-item"><a class="nav-link" href="">title2</a></li>
  </ul>
</li>

    • 4

  3. 在您的代码中，只有最后一个对象会有一个 class $('li.nav-item')，但是您需要对所有内容（如已经编写的）进行排序并确定是否至少有一个对象有一个 class。

    $('li.nav-item').each(function() {
  const $navItem = $(this),
    $menuItem = $(this).parents('li.menu-item'),
    navItemIsActive = $navItem.hasClass('menu-active-sub-item');

  if(navItemIsActive) {
    $menuItem.addClass('current-menu-parent');
    return false; // так как достаточно одного совпадения, то цикл можно прервать
  }
});
    • 1

相关问题