javascript - 检查所有 li，如果一个有 class active 那么只有 parent ul addclass

Question

在这里，我尝试使用我的代码，但它不仅添加了 class="in" 活跃的 parent ，还添加了其他 parent 。我只想为活跃的 parent 添加类(class)，而不是其他人。

$(function() {
  $(".left_menu .nav-second-level li").each(function() {
    if ($('.left_menu .nav-second-level li').hasClass('active')) {
      $(this).parents('.left_menu .nav-second-level').addClass('in');
    } else {
      $(this).parents('.left_menu .nav-second-level').removeClass('in');
    }
  });
});

.active {
  color: red;
  background-color: red;
}
.in {
  background-color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav" id="side-menu">
  <li class="left_menu">
    <a href="#">
      <i class="fa fa-diamond"></i> 
      <span class="nav-label">Employee</span>
      <span class="fa arrow"></span>
    </a>
    <ul class="nav nav-second-level collapse">
      <li class="">
        <a href="">create account</a>
      </li>
      <li class="">
        <a href="">role set</a>
      </li>
      <li class="active">
        <a href="">capability set</a>
      </li>
    </ul>
  </li>
  <li class="left_menu">
    <a href="#">
      <i class="fa fa-diamond"></i>
      <span class="nav-label">Department</span>
      <span class="fa arrow"></span>
    </a>

    <ul class="nav nav-second-level collapse">
      <li class="">
        <a href="">Add department</a>
      </li>
      <li class="">
        <a href="">Vew Deparment</a>
      </li>
    </ul>
  </li>
</ul>

Answer 1

您不需要使用each，您可以像下面这样轻松地做到这一点。

$('.left_menu .nav-second-level li').parent().removeClass('in')
$('.left_menu .nav-second-level li.active').parent().addClass('in')

完整片段

$('.left_menu .nav-second-level li').parent().removeClass('in')
 $('.left_menu .nav-second-level li.active').parent().addClass('in')

.active {
  color: red;
  background-color: red;
}
.in {
  background-color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav" id="side-menu">
  <li class="left_menu">
    <a href="#">
      <i class="fa fa-diamond"></i> 
      <span class="nav-label">Employee</span>
      <span class="fa arrow"></span>
    </a>
    <ul class="nav nav-second-level collapse">
      <li class="">
        <a href="">create account</a>
      </li>
      <li class="">
        <a href="">role set</a>
      </li>
      <li class="active">
        <a href="">capability set</a>
      </li>
    </ul>
  </li>
  <li class="left_menu">
    <a href="#">
      <i class="fa fa-diamond"></i>
      <span class="nav-label">Department</span>
      <span class="fa arrow"></span>
    </a>

    <ul class="nav nav-second-level collapse">
      <li class="">
        <a href="">Add department</a>
      </li>
      <li class="">
        <a href="">Vew Deparment</a>
      </li>
    </ul>
  </li>
</ul>