jQuery添加和删除类和CSS，如果嵌套列表中还有另一个类

Question

我有如下的HTML代码块。

<ul>       
  <li class="level_1 has_sub no_active">
    <a href="">Window Rolling</a>
    <ul class="level_2 has_sub no_active">
      <li class="level_2 no_sub no_active"><a href="">T52</a></li>
      <li class="level_2 no_sub no_active"><a href="">T30</a></li>
      <li class="level_2 no_sub no_active"><a href="">T57</a></li>
      <li class="level_2 no_sub no_active"><a href="">T39</a></li>
      <li class="level_2 no_sub no_active"><a href="">TE26</a></li>
    </ul>
  </li>

  <li class="level_1 has_sub no_active">
    <a href="">Insulated And Extruded</a>
    <ul class="level_2 has_sub no_active">
      <li class="level_2 no_sub no_active"><a href="">TE77</a></li>
      <li class="level_2 no_sub no_active"><a href="">TE78</a></li>
      <li class="level_2 no_sub no_active"><a href="">T77</a></li>
      <li class="level_2 no_sub no_active"><a href="">TS77</a></li>
    </ul>
  </li>

  <li class="level_1 no_sub no_active"><a href="">Grille Type Rolling</a></li>
  <li class="level_1 no_sub no_active"><a href="">PVC High Speed Doors</a></li>
  <li class="level_1 no_sub no_active"><a href="">Swinging doors</a></li>
</ul> 

使用此代码，我必须检查ul ul li是否有一个名为active2的类。 如果该类存在，那么我想向其父元素添加类，如下所示：

ul > li.active1 
ul ul.active1 and display: block; 

例如：

  <li class="level_1 has_sub active1">
    <a href="">Insulated And Extruded</a>
    <ul class="level_2 has_sub active1" style="display: block;">
      <li class="level_2 no_sub active2"><a href="">TE77</a></li>
      <li class="level_2 no_sub no_active"><a href="">TE78</a></li>
      <li class="level_2 no_sub no_active"><a href="">T77</a></li>
      <li class="level_2 no_sub no_active"><a href="">TS77</a></li>
    </ul>
  </li>

我尝试使用jquery ，如下所示。 但是，这些类和CSS增加了所有li和ul 。

if ($('ul li ul li').hasClass('active2')) {
  $('ul li')
    .removeClass('no_active')
    .addClass("active1"); 

  $('ul li ul')
    .removeClass('no_active')
    .addClass("active1")
    .css("display","block");   
}

谁能告诉我如何解决这个问题？

谢谢。

Answer 1

您可以使用过滤器

var removeClass = 'no_active',
    addClass = 'active1';
$('ul ul li')
    .filter(function () {
        return $(this).hasClass('level_2');
    })
    .parent()
    .removeClass(removeClass)
    .addClass(addClass)
    .parent()
    .removeClass(removeClass)
    .addClass(addClass);