Pass IDs of visible images

Question

I have got 21 images inside multiple divs. Below is an example of the images.

<img src="fruits/lychee.png" class ="fruit" id="fruitl156">
<img src="fruits/cranberry.png" class ="fruit" id="fruitl141">
<img src="fruits/avocado.png" class ="fruit" id="fruitl214">

When the page loads 3 - 6 random images will be visible. Now I want to be able to know which images are visible by its id. So basically I want to pass the id of each visible image on to a function.

This is what I did. But its not doing as expected. Not all visible image id's are passed. How can I identify the visible images and be able to pass each of their IDs to the passFunction() ?

$('#getIDs').click(function(){
   if( $('.fruit').css('visibility', 'visible') ){
       passFunction( $(this.id) );
   }
});

is it your code that makes the images invisible? If so, how do you hide / show them? — Leonid Usov, Aug 03 '15 at 19:21
let me stackoverflowit for you http://stackoverflow.com/q/8774089/5171225 — Leonid Usov, Aug 03 '15 at 19:22
You may want to use `.each()` to go through each element, and `push` them into an array of visible elements. Then pass that array. — Spencer Wieczorek, Aug 03 '15 at 19:24
@LeonidUsov thanks. I tried `if( $('.fruit').is(':visible') ) {}` but it won't pass all visible image IDs. — Bekki, Aug 03 '15 at 19:25

score 2 · Accepted Answer · answered Aug 03 '15 at 19:26

2

Try using this pseudo :visible on document load (am assuming the images are created randomly when the document loads) as follows:

$('.fruit:visible').each(function(){
       passFunction( $(this).attr("id") );
});

answered Aug 03 '15 at 19:26

KAD

10,972
4
31
73

1

It actually doesn't matter for the id, since both (attr and prop) are gonna have the same value and are not manipulated by any user interaction. Prop is better used with form elements to set/get the element values since attr will fail sometimes.. Though it can surely be used here. – KAD Aug 03 '15 at 19:29

score 1 · Answer 2 · answered Aug 03 '15 at 19:27

This is done easily with :visible and .each()

$('#getIDs').click(function(){
    $('.fruit:visible').each(function (){
       passFunction( $(this.id) );
   });
});

BUT

the :visible selector might not select all the "invisible" images. (example images that are visible but are off screen)

score 0 · Answer 3 · answered Aug 03 '15 at 19:38

As leonid mentioned if your code is showing/hiding image elements you can use :visible selector with any of above code examples. You would also need to lookout how images are being shown/hidden. If it is controlled by opacity or visibility css styling it will come in visible images ids even if not shown on screen. If it has css styling as display:none it wont get caught in :visible selector that is what I noted in jquery visible selector example. You can refer to https://api.jquery.com/visible-selector/

Pass IDs of visible images

3 Answers3