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

Question

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

简化的 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>

如您所见，第一个 block 有一些 <li class=" toto"> 没有 css 显示无，而第二个 block (OTHER) 具有 style="display:none"

的所有 li

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

例如。

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

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

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

音频(没有“其他”)

Answer 1

通常你会过滤li.first是否根据元素总数li后代元素等于用 li:hidden 选择的数字.

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

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

如果要根据display进行查询每个属性 li元素，那么你可以使用:

Updated Example

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