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

Question

我做不到，因为页面上 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 显示 none，而第二个块 (OTHER) 有所有带有 style="display:none"

的 li

所以，我只需要用 jQuery 隐藏特定的 .first... 而且，页面上有很多这样的块。

例如

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

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

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

音频（没有"OTHER"）

Answer 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();

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

Hide parent if all li children element have CSS style display: none

javascript

jquery

parent

children