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))
}
});