0

I have the multiple img with the same class name in the html. Any way I can check if the img with the same class name is hide with jquery.

Example: I have the following image code in html

<img src='test1.jpg' class='test' style='display:inline;'>
<img src='test2.jpg' class='test' style='display:none;'>
<img src='test3.jpg' class='test' style='display:inline;'>
<img src='test4.jpg' class='test' style='display:none;'>

How can I using jquery to find all the hidden images?

Difster
  • 3,264
  • 2
  • 22
  • 32
Jin Yong
  • 42,698
  • 72
  • 141
  • 187

4 Answers4

0

Given your HTML (updated to include an id attribute on each image), here's one potential solution.

https://jsfiddle.net/eulloa/36gfwk6k/1/

$(function(){
    console.log(isImgVisible($('#img-1')));
    console.log(isImgVisible($('#img-2')));
    console.log(isImgVisible($('#img-3')));
    console.log(isImgVisible($('#img-4')));
})

function isImgVisible(img) {
    if (img.is(':visible'))
    return true;

  return false;
}

Read more here: check if a element is display:none or block on click. Jquery

eulloa
  • 242
  • 2
  • 8
0

To find out if all images are hidden (or which images are hidden):

$(".test").each(function() {
  if( $(this).is(":hidden") ) {
    // Current image is hidden, do something
    break;
  }
}

If code within if clause doesn't run, all images are hidden.

Cedric Ipkiss
  • 5,662
  • 2
  • 43
  • 72
0

Try this:

$(document).ready(function(){
 $("#view").click(function(){
 //alert("")
 var isVissable;

isVissable = $("#test_one").is(':hidden')
 console.log( isVissable)
  isVissable = $("#test_two").is(':hidden')
  console.log( isVissable)
   isVissable = $("#test_three").is(':hidden')
   console.log( isVissable)
  isVissable = $("#test_four").is(':hidden')
   console.log( isVissable)


 })


})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src='test1.jpg' id='test_one' class="test" style='display:inline;'>
<img src='test2.jpg' id='test_two'class="test"  style='display:none;'>
<img src='test3.jpg' id='test_three' class="test"  style='display:inline;'>
<img src='test4.jpg' id='test_four' class="test"  style='display:none;'>

<button id="view"> view </button>
0

You can use the following snippet to check if all images of class test are hidden

function checkIfAllHidden() {
  var allHidden = true;
  $(".test").each(function(e) {
    allHidden &= $(this).is(":hidden");
  });
  return Boolean(allHidden);
}
StaticBeagle
  • 5,070
  • 2
  • 23
  • 34