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

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

您可以使用filter

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

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

1 个答案: