隱藏父，如果所有li子元素具有CSS樣式顯示：無

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）具有所有利用風格=「顯示：無」

所以，我需要隱藏該具體的。首先只有jQuery ...並且在頁面上有很多塊。

例如。

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

這不工作「的原因，它選擇頁面上的所有。首先，我需要檢查每一個獨立。首先，隱藏或保持....

最終結果在這種情況下，必須是：

AUDIO（不包括「其他」）

Answer 1

通常你會僅僅基於過濾li.first元素是否li後代元素EQUA總數ls是用li:hidden選擇的號碼。

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