Using ':hidden' selector to find hidden elements in jquery

Question

In jQuery, I can use $(':hidden') to find hidden elements, but I don't want to include the 0 size elements ( width=0 and height=0 ).

How to achieve this?

I can't just judge if it is 0 size, because if one of its parents is hidden, I also want to select it.

For example:

 <img id="e1" width="0" height="0" /> <div style="display:none;"> <img id="e2" width="0" height="0" /> </div> <script> // I want to select "e2",but not "e1" var myelems = $('img:hidden'); </script> 

I want to select "e2",but not "e1".

Answer 1

use filter in jquery

$(':hidden').filter(function(){
      return $(this).width()!=0 && $(this).height()!=0;
});

Answer 2

Something like this?

if (element.is(':hidden') && element.width() != 0 && element.height != 0) {
   //do some stuff
}

Answer 3

You can try using the not method or not selector of jQuery to solve your issue. For example,

 $(document).ready(function() { console.log($(":hidden").not($("input[width=0],input[height=0]"))); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>Check the output in console</h1> <input type="hidden" name="a1" id="a1" value="a1"> <input type="hidden" name="a2" id="a2" value="a2"> <input type="hidden" name="b1" id="b1" width=0 height=0 value="a3"> 

Try it!!

Answer 4

If you set the style attribute to display: none; (or use jQuery's .hide()) you can use this

( Demo )

$('*[style*="display: none;"]');

Answer 5

jQuery('elem:hidden').each(function(ind){
if(jQuery(this).height() > 0 && jQuery(this).width() > 0){
console.log(jQuery(this))
}
});