如果所有li children元素都具有CSS样式display:none,则隐藏父级

时间:2015-12-17 00:20:35

标签: javascript jquery parent children

我无法做到这一点&因为页面上的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显示无,而第二个块(OTHER)的所有li都带有 style =&#34;显示:无&#34;

所以,我需要使用jQuery隐藏特定的 .first ...再次,页面上有很多这样的块。

例如

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

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

本案的最终结果必须是:

音频(没有&#34;其他&#34;)

1 个答案:

答案 0 :(得分: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();