CODEWITHSUNDEEP
javascriptjquery
user2706762
user2706762

Reputation: 397

How to confirm if all elements are hidden

I build a UI interface that show messages and after confirming them they become :"display=none", now i want to check if all the elements are been confirm meaning all hidden. so that my interface wont start.

This is the code:

this is visible: 

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

this is not visible:

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

can i check via the class or type? like 

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

what is a good way of doing this?

Thanks

Upvotes: 1

Views: 862

Answers (4)

Nano
Nano

Reputation: 1398

For such a query, you can use the jQuery :visible selector, which gives you only visible elements (everything that Consumes space in the layout) As return.

If you then compare the amount of visible elements with the invisible, you'll see whether one is not visible.

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

Or

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

Upvotes: 1

Murali Murugesan
Murali Murugesan

Reputation: 22619

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

Upvotes: 1

adeneo
adeneo

Reputation: 318162

Simply use is(':visible')

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

FIDDLE

Upvotes: 3

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

you can do like this:

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

or:

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

Fiddle Example

Upvotes: 2

Related Questions