检查每个图像是否可见。如果没有可见,请做一些事情

时间:2012-07-09 17:22:05

标签: jquery each

$("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>

这不起作用,但我真的找不到原因。需要做什么:检查所有图像是否可见。如果它们都不可见,请显示一个段落。

感谢。

3 个答案:

答案 0 :(得分:1)

我们可以使用selector来找出可见的img控件。 $("img:visible")为您提供可见的jQuery img对象数组。通过检查长度,我们可以看到有多少img控件是可见的,length = 0表示选择器means none of img is visible没有返回任何元素。

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

答案 1 :(得分:1)

如果隐藏了任何图像,您的代码所做的就是显示段落,如果所有图像都被隐藏,您想要显示的是:

var shown = false;
$("img").each(function() {
  if($(this).is(':hidden')) {
    shown = true;
  }
});
if (!shown) {
  $("p#nothing").show();
}

答案 2 :(得分:0)

试试这个:

if ($("img:hidden").length > 0) {
    $("p#nothing").show();
}