jQuery Tutorial Tutorials - jQuery :hidden selector

The jQuery :hidden selector is used to select all the elements that are hidden.

• The element is considered hidden in these situations:

1. It has a css value display:none;
2. It's a type="hidden" form element;
3. It's width and height are both set to 0 ; ( Older jquery version.For example:1.9.0 )
4. It's ancestor element is hidden,so the element is not shown on the page.

• In some browsers :hidden includes head, title, script, etc.
  You can use .not() to exclude them.
  var hiddenElements = $( "body" ).find( ":hidden" ).not( "script" );

• The element with visibility: hidden or opacity: 0; is considered visible，because it takes space in the flow of the document.

jQuery :hidden selector Syntax

$(':hidden')

jQuery :hidden selector Examples

demonstrates hidden elements in various states.

Following is a simple example which would count hidden inputs and divs.
Try now

How to check if an element is hidden?

Use $('selector').is(":hidden") or $(element).is(":visible") to check if an element is hidden. Please note the situations that an element is considered hidden as mentioned above.

Try now

How to get the width and height of a hidden element?

An element with display:none has no dimensions. If you want it hidden but measurable, use visibility: hidden or opacity: 0; .

If you want to get the width of an element with display:none, you can temporarily make it visible but out of viewport. It does not affect the user experience due to it's hidden.

// store the original attributes temporarily.
var origStyle  = $("#myDiv").attr("style"),
newStyle = ';position: absolute !important; top: -1000px !important; display: block !important;';

$("#myDiv").attr( 'style', origStyle+newStyle );

// get width and height
var elemWidth = $("#myDiv").width();
var elemHeight = $("#myDiv").height();
// restore the attributes
$("#myDiv").attr("style", origStyle ? origStyle : "");

console.log(elemWidth);
console.log(elemHeight);

Try it