Класс не добавляется с оператором 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>

Answer 1

Использование this неверно.Без правильной цепочки this будет ссылаться на документ или окно.Однако в вашем случае вам не нужно заявление if.Просто найдите li, у которого есть класс active, найдите его родительский элемент 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>

Answer 2

Вы можете просто получить 'li.active' вместо того, чтобы получить их все и протестировать, и вы можете использовать parents(2), чтобы получить второго родителя (родительский элемент nav):

$(document).ready(function(){
   $('.book ul li.active').parents(2).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>