jQuery 删除顶部 div 父级，如果？

Question

如果容器 div 没有可见的子元素，我会尝试隐藏它。

以下是我当前的代码:

<ul class="category-topics">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul> 

<ul class="category-topics">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul> 

如果某个类别主题在任何时候都隐藏了以下所有类别。

<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>

然后隐藏没有可见子项且只有那个子项的类别。

如何实现？

我现在在做什么:

$('.category-topics').each(function(i, obj) {
    if($('.level-3').children(':visible').length == 0) {
   console.log('All children is empty');
}
});

Answer 1

您需要通过在当前元素上使用 .find() 来在每个循环内定位具有类 .level3 的底层元素。

 $('.category-topics').each(function(i, obj) {
       if($(this).find('.level-3').children(':visible').length == 0) {
         alert('All children is empty');
         $(this).find('.level-3').hide();  // hides the ul element
    }
});

工作示例:https://jsfiddle.net/DinoMyte/6x80vabm/14/