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显示无，而第二个块（OTHER）的所有li都带有 style =＆＃34;显示：无＆＃34;

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

例如

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

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

本案的最终结果必须是：

音频（没有＆＃34;其他＆＃34;）

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

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

1 个答案: