如果所有 li 子元素都具有 CSS 样式显示，则隐藏父级：无答案

【问题标题】：Hide parent if all li children element have CSS style display: none如果所有 li 子元素都具有 CSS 样式显示，则隐藏父级：无
【发布时间】：2015-12-17 00:20:34
【问题描述】：

我做不到，因为页面上有很多 li 块...

简化的 HTML：

    <li class="first"> <a href="http://myweb.com/test/something" title="">AUDIO</a>
  <ul style="display: none;">
    <li class="  toto"> <a href="http://myweb.com/test/something" title="">Audio one</a>
      <ul style="display: none;">
        <li class="  toto"> <a href="http://myweb.com/test/something" title="">Accessories (<font color="#0b8553"><b>0</b></font>)</a></li>
        <li class="  toto" style="display:none"> <a href="http://myweb.com/test/something" title="">Audio mp3 (<font color="#0b8553"><b>0</b></font>)</a></li>
        <li class="  toto" style="display:none"> <a href="http://myweb.com/test/something" title="">Audio player (<font color="#0b8553"><b>1</b></font>)</a></li>
      </ul>
    </li>
    <li class="last  toto" style="display:none"> <a href="http://myweb.com/test/something" title="">Audio hifi</a>
      <ul style="display: none;">
        <li class="last  toto" style="display:none"> <a href="http://myweb.com/test/something" title="">Audio items (<font color="#0b8553"><b>0</b></font>)</a></li>
      </ul>
    </li>
  </ul>
</li>

<li class="first"> <a href="http://myweb.com/test/something" title="">OTHER</a>
  <ul style="display: none;">
    <li class="  toto" style="display:none"> <a href="http://myweb.com/test/something" title="">other 2</a>
      <ul style="display: none;">
        <li class="  toto" style="display:none"> <a href="http://myweb.com/test/something" title="">other 3 (<font color="#0b8553"><b>0</b></font>)</a></li>
        <li class="  toto" style="display:none"> <a href="http://myweb.com/test/something" title="">other 4 (<font color="#0b8553"><b>0</b></font>)</a></li>
        <li class="  toto" style="display:none"> <a href="http://myweb.com/test/something" title="">other 5 (<font color="#0b8553"><b>1</b></font>)</a></li>
      </ul>
    </li>
    <li class="last  toto" style="display:none"> <a href="http://myweb.com/test/something" title="">other 6</a>
      <ul style="display: none;">
        <li class="last  toto" style="display:none"> <a href="http://myweb.com/test/something" title="">other 7 (<font color="#0b8553"><b>0</b></font>)</a></li>
      </ul>
    </li>
  </ul>
</li>

你可以看到第一个块有一些 <li class=" toto"> 没有 css display none，而第二个块 (OTHER) 有所有 li style="display:none"

所以，我只需要使用 jQuery 来隐藏特定的 .first...同样，页面上有很多类似的块。

例如。

if(!$(".first").children().is(':visible')) {
  $(".first").hide();
}

这不起作用，因为它选择了页面上的所有 .first，我需要单独检查每个 .first 并隐藏或保留它....

这种情况下的最终结果一定是：

音频（不含“其他”）

【问题讨论】：

标签： javascript jquery parent children

【解决方案1】：

通常您只需根据li 后代元素的总数是否等于li:hidden 选择的数量来过滤li.first 元素。

$('li.first').filter(function() {
  return $(this).find('li').length === $(this).find('li:hidden').length;
}).hide();

但是，这显然不适用于您的情况，因为从技术上讲，所有后代 li 元素都隐藏在您的 HTML 中，因为它们的父 ul 元素也被隐藏了。

如果要根据每个li 元素的display 属性进行检查，则可以使用：

Updated Example

$('li.first').filter(function () {
  return $(this).find('li').length === $(this).find('li').filter(function () {
    return $(this).css('display') === 'none';
  }).length;
}).hide();

【讨论】：