Скрыть определенные элементы вложенного списка на основе класса

Question

Учитывая следующий пример вложенный список:

<ul id="toplist"> 
 
    <li>Item 1</li> 
 
    <ul> 
 
     <li class="active">Item 1a</li> 
 
     <li>Item 1b</li> 
 
    </ul> 
 
    <li>Item 2</li> 
 
    <ul> 
 
     <li>Item 2a</li> 
 
     <li>Item 2b</li> 
 
    </ul> 
 
    <li>Item 3</li> 
 
    <ul> 
 
     <li>Item 3a</li> 
 
     <li>Item 3b</li> 
 
    </ul> 
 
</ul>

Я хочу, чтобы иметь возможность скрыть все на высшем уровне li, что не имеет ребенок с классом active. Так в приведенном выше примере Пункт 2 и его дети должны быть скрыты, а также Позиция 3 и его дети. Пункт 1 и его дети должны оставаться.

Я пытался что-то вроде:

$("#toplist").not(".active").hide(); 

Но это было уничтожить все.

Answer 1

Предполагая, что вы исправить неверный HTML (вы не можете иметь <ul> как ребенок другого <ul>, только <li>), это работает:

$('#toplist > li').each(function() { 
 
    if (!$(this).find('li.active').length) $(this).hide(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul id="toplist"> 
 
    <li>Item 1 
 
     <ul> 
 
      <li class="active">Item 1a</li> 
 
      <li>Item 1b</li> 
 
     </ul> 
 
    </li> 
 
    <li>Item 2 
 
     <ul> 
 
      <li>Item 2a</li> 
 
      <li>Item 2b</li> 
 
     </ul> 
 
    </li> 
 
    <li>Item 3 
 
     <ul> 
 
      <li>Item 3a</li> 
 
      <li>Item 3b</li> 
 
     </ul> 
 
    </li> 
 
</ul>