Pass IDs of visible images

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) );
   }
});

---

尝试使用这个pseudo :visible在文档加载时:visible （假设图像是在文档加载时随机创建的），如下所示：

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

---

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)

---

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/

链接地址: http://www.djcxy.com/p/83550.html

上一篇: jQuery .removeClass和addClass

下一篇: 传递可见图像的ID