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,248
  • 2
  • 20
  • 32
Jin Yong
  • 40,910
  • 71
  • 135
  • 181

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
  • 4,532
  • 2
  • 39
  • 59
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
  • 4,925
  • 2
  • 26
  • 33