¿Cómo compruebo si un elemento está oculto en jQuery?
¿Cómo puedo alternar la visibilidad de un elemento usando .hide(), .show()o.toggle() ?
¿Cómo pruebo si un elemento es visibleo hidden?
Dado que la pregunta se refiere a un solo elemento, este código podría ser más adecuado:
// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");
// The same works with hidden
$(element).is(":hidden");
Es lo mismo que la sugerencia de Twernt , pero aplicada a un solo elemento; y coincide con el algoritmo recomendado en las preguntas frecuentes de jQuery .
Usamos is() de jQuery para verificar el elemento seleccionado con otro elemento, selector o cualquier objeto jQuery. Este método recorre los elementos DOM para encontrar una coincidencia que satisfaga el parámetro pasado. Devolverá verdadero si hay una coincidencia; de lo contrario, devolverá falso.
Puedes utilizar el hiddenselector:
// Matches all elements that are hidden
$('element:hidden')
Y el visibleseleccionador:
// Matches all elements that are visible
$('element:visible')
if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
// 'element' is hidden
}
El método anterior no considera la visibilidad del padre. Para considerar también al padre, debes usar .is(":hidden")o .is(":visible").
Por ejemplo,
<div id="div1" style="display:none">
<div id="div2" style="display:block">Div2</div>
</div>
El método anterior se considerará
div2visible mientras:visibleno lo sea. Pero lo anterior puede ser útil en muchos casos, especialmente cuando necesita encontrar si hay algún div de error visible en el padre oculto porque en tales condiciones:visibleno funcionará.
Ninguna de estas respuestas aborda lo que entiendo que es la pregunta, que es lo que estaba buscando: "¿Cómo manejo los elementos que tienen visibility: hidden?" . Ninguno :visiblede los dos :hiddense encargará de esto, ya que ambos buscan la visualización según la documentación. Hasta donde pude determinar, no existe ningún selector para manejar la visibilidad de CSS. Así es como lo resolví (selectores jQuery estándar, puede haber una sintaxis más condensada):
$(".item").each(function() {
if ($(this).css("visibility") == "hidden") {
// handle non visible state
} else {
// handle visible state
}
});
