我不能这么做,因为页面上有很多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 display none,而第二个块(OTHER)有所有li且style="display:none"
因此,我需要隐藏特定的.首先仅使用jQuery。。。再说一遍,页面上有很多类似的块。
例如。
if(!$(".first").children().is(':visible')) {
$(".first").hide();
}
这不起作用,因为它选择了所有的。首先在页面上,我需要检查每个。首先单独隐藏或保留它…
这种情况下的最终结果必须是:
音频(不带"OTHER")
通常,您只需根据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
属性进行检查,则可以使用:
更新示例
$('li.first').filter(function () {
return $(this).find('li').length === $(this).find('li').filter(function () {
return $(this).css('display') === 'none';
}).length;
}).hide();