jquery - 没有使用 if 语句添加类

Question

我有三个导航，我只想要显示具有活动类的导航，但我无法实现这一点。如您所见，列表项是具有活动类的元素，因此我的目标是列表项而不是 ul。谢谢！

$(document).ready(function(){
    if ($('.book ul li').hasClass('active')){
        $(this).addClass('showActiveBook');
    }
});

.book{
    display: none;
}
.showActiveBook{
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="book book1">
   <ul>
      <li>
          <a href="#">Book1</a>
       </li>
   </ul>
</nav>

<nav class="book book2">
  <ul>
     <a href="#">Book 2</a>
     <li class="active"> 
         <ul>
             <li>book2Chapter1</li>
             <li>book2Chapter2</li>
         </ul>
     </li>
  </ul>
</nav>

<nav class="book book3">
  <ul>
      <li>
          <a href="#">Book3</a>
      </li>
  </ul>
</nav>

标签： jquery

Answer 1

的用法this不正确。如果没有正确的链接，this将引用文档或窗口。但是，在您的情况下，您不需要 if 语句。只需找到具有 active 类的 li，找到它的父 book 元素，然后将类添加到它。

$(document).ready(function(){
    $('.book ul li.active').closest('.book').addClass('showActiveBook');
});

.book{
    display: none;
}
.showActiveBook{
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="book book1">
   <ul>
      <li>
          <a href="#">Book1</a>
       </li>
   </ul>
</nav>

<nav class="book book2">
  <ul>
     <a href="#">Book 2</a>
     <li class="active"> 
         <ul>
             <li>book2Chapter1</li>
             <li>book2Chapter2</li>
         </ul>
     </li>
  </ul>
</nav>

<nav class="book book3">
  <ul>
      <li>
          <a href="#">Book3</a>
      </li>
  </ul>
</nav>