Question

$("img").each(function() {
    if($(this).is(':hidden')) {
        $("p#nothing").show();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imgWrap">
<img src="http://static.pullandbear.net/2/photos/2012/V/0/1/p/9396/326/800/9396326800_4_1_4.jpg" class="fashion black" alt="">
<img src="http://static.pullandbear.net/2/photos/2012/V/0/1/p/9396/323/401/9396323401_4_1_4.jpg" class="fashion" alt="">
<img src="http://static.pullandbear.net/2/photos/2012/V/0/1/p/9396/306/622/9396306622_4_1_4.jpg" class="fashion pink" alt="">
<img src="http://static.pullandbear.net/2/photos/2012/V/0/1/p/5396/361/707/5396361707_4_1_4.jpg" class="fashion brown" alt="">
<img src="http://static.pullandbear.net/2/photos/2012/V/0/1/p/5396/302/800/5396302800_4_1_4.jpg" class="fashion pink" alt="">
<img src="http://static.pullandbear.net/2/photos/2012/V/0/1/p/5396/377/800/5396377800_4_1_4.jpg" class="fashion black" alt="">
<img src="http://static.pullandbear.net/2/photos/2012/V/0/1/p/5396/349/725/5396349725_4_1_4.jpg" class="fashion beige" alt="">
<img src="http://static.pullandbear.net/2/photos/2012/V/0/1/p/5639/306/401/5639306401_4_1_4.jpg" class="jumpsuit blue" alt="">
</div>

$("img").each(function() {
    if($(this).is(':hidden')) {
        $("p#nothing").show();
    }
});

HTML:

<div id="imgWrap">
<img src="http://static.pullandbear.net/2/photos/2012/V/0/1/p/9396/326/800/9396326800_4_1_4.jpg" class="fashion black" alt="">
<img src="http://static.pullandbear.net/2/photos/2012/V/0/1/p/9396/323/401/9396323401_4_1_4.jpg" class="fashion" alt="">
<img src="http://static.pullandbear.net/2/photos/2012/V/0/1/p/9396/306/622/9396306622_4_1_4.jpg" class="fashion pink" alt="">
<img src="http://static.pullandbear.net/2/photos/2012/V/0/1/p/5396/361/707/5396361707_4_1_4.jpg" class="fashion brown" alt="">
<img src="http://static.pullandbear.net/2/photos/2012/V/0/1/p/5396/302/800/5396302800_4_1_4.jpg" class="fashion pink" alt="">
<img src="http://static.pullandbear.net/2/photos/2012/V/0/1/p/5396/377/800/5396377800_4_1_4.jpg" class="fashion black" alt="">
<img src="http://static.pullandbear.net/2/photos/2012/V/0/1/p/5396/349/725/5396349725_4_1_4.jpg" class="fashion beige" alt="">
<img src="http://static.pullandbear.net/2/photos/2012/V/0/1/p/5639/306/401/5639306401_4_1_4.jpg" class="jumpsuit blue" alt="">
</div>

<p id="nothing">No products were found that matched your filters</p>

This doesn’t work but I really can’t find out why. What needs to happen: check all images whether they are visible. If none of them is visible, show a paragraph.

Thanks.

Answer 1

We can use selector to find out the img controls which are visible. $("img:visible") gives you array of jQuery img objects those are visible. By checking the length we find out the how many img controls are visible and length = 0 mean no element is returned by the selector means none of img is visible.

if($("img:visible").length == 0)
{
  //show graph
}