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

您需要使用当前元素上的.level3在每个循环中使用类.find()定位基础元素。

 $('.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/

如果jQuery删除顶部div父母？

1 个答案: