如何确认是否隐藏所有元素

Question

我构建了一个显示消息的UI界面，在确认消息之后，它们变为：＆＃34; display = none＆＃34;，现在我想检查所有元素是否已经确认意味着所有隐藏。所以我的界面不会开始。

这是代码：

这是可见的：

<li id="announcement4" class="announcement"></li> 

这是不可见的：

<li id="announcement4" class="announcement" style="display: none"></li>    

我可以通过课程或类型查看吗？喜欢

if(all elements type li are hidden)    
if(all elements class announcement are hidden)

这样做的好方法是什么？

由于

Answer 1

只需使用is(':visible')

即可

var allLiHidden    = !$('li').is(':visible');
var allClassHidden = !$('.announcement').is(':visible')

FIDDLE

Answer 2

你可以这样做：

if($('ul#SomeId').children(':visible').length == 0) {
   // all are hidden
}

或：

if($('li.announcement:visible').length == 0) {
       // all are hidden
    }

Fiddle Example

Answer 3

if($('.announcement:visible').length>0)
{
//something is visible
}

Answer 4

对于这样的查询，您可以使用jQuery :visible选择器，它只为您提供可见元素（在布局中消耗空间的所有内容）作为返回。

如果您然后将可见元素的数量与不可见元素进行比较，您将看到是否有可见元素。

if( $('.announcement').length === $('.announcement:visible').length ){
   //all visible
} else{
   //not all visible
}

或者

if( $('li').length === $('li:visible').length ){
   //all visible
} else{
   //not all visible
}