Clever Geek Handbook

How to check the image is visible or not?

The code below can check if the image is visible or not.

$('#div1 img:visible')

Which selects all descendants of the images and:

$('#div1 > img:visible')

I just need to know that when I iterate over all the images in a container like dgImages $("#dgImages] img").each(function () {}

how can I tell if the image is visible or not? Can I write something like if($(this:visible)){//Do something}

?. Thank.

+2


source to share


4 answers 


$("#dgImages").find('img').each(function(){
   if($(this).is(':visible')){
     alert("This image is visible");
    }
});


+5


source


You can use is()

to check your object for any selector:



if($(this).is(':visible')) { ... }
+4


source


You can use .is()

:

if ($(this).is(':visible')) {
  ...
+4


source


This page demonstrates an alternative approach using display: http://acarna.com/vis-test.php

Instead of looking at each image, I used a class to identify a specific group of images to be switched. Clicking the "Toggle" button checks the .css ("display") to get the current display state and toggle it to inline or not.

See the source on the above page for details.

If you have Firebug installed, you can see what happens to the markup as the display property toggles between inline and none.

+1


source






More articles:


All Articles