Selector hidden

El selector :hidden selecciona todos los elementos en la página que están ocultos. Los elementos con visibility: hidden o con opacity: 0 se consideran visibles, ya que ocupan espacio en el diseño. Los elementos pueden considerarse invisibles por varias razones: el valor de la propiedad CSS display es none, o son elementos con el atributo type="hidden", o su altura o anchura están establecidas en 0, o su elemento padre está oculto. Dado que :hidden no pertenece a la especificación CSS, para mejorar el rendimiento en los navegadores modernos es mejor filtrar primero los elementos con el uso de un selector CSS puro, y luego aplicar .filter(':hidden'). Rastrear la visibilidad de los elementos usando otros métodos, por ejemplo, usando una clase, puede proporcionar un mejor rendimiento.

Sintaxis

Así seleccionamos los elementos ocultos:

javascript$(':hidden');

Ejemplo

Hagamos que al hacer clic en el botón #test se muestren los cuadrados invisibles:

html<button id="test">show</button>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>

cssdiv {
  width: 40px;
  height: 40px;
  margin: 5px;
  border: 2px outset green;
  float: left;
}

javascript$('#test').click(function() {
  $('div:hidden').show('slow');
});

Véase también