Determine if collection of elements are visible using JQuery like $(".someClass")

Question

Hi,

I have a collection of elements on my page, and I want to see if they are visible or not currently.

So:

$(".someClass")

How can I loop through and figure this out? because if it is visible, i have to fire another function.

Answer 1

$(".someClass:visible")

will return the visible ones.

Answer 2

$(".someClass").each(function(){
  if($(this).is(":visible")){
    //item is visible: do something
   }
});

how about that?

Answer 3

What you could do:

$(".someClass").each(function(x) { if ( x.style.display != "none" && x.style.visibility != "hidden" ) { your_function(); } });

where your_function() is the name of your function.

Answer 4

All solutions in terms of $('.someClass').is(':visible') are unreliable. All it tells us is if a particular element has a styling of display:none or visibility:hidden. This is not the same as whether an element is visible!

Consider a situation like this:

<div style="display:none;"><div class="someClass"></div></div>

Everybody can see that the element designated by $('.someClass') is invisible. But $('.someClass').is(':visible') will return true!

The only water-proof solution is to not only check for is(':visible') on the $('.someClass'), but on all of its parent elements as well. Only if for none of the parents holds that is(':visible') === false, we can conclude that $('.someClass') is actually visible.