Compruebe, utilizando jQuery, si un elemento es 'display: none' o bloque al hacer clic

240

Quiero verificar y ordenar los elementos que están ocultos. ¿Es posible encontrar todos los elementos con atributo displayy valor none?

jquery css Nicholas Francis
fuente

Respuestas:

543

Puede usar : visible para elementos visibles y : hidden para descubrir elementos ocultos. Estos elementos ocultos tienen displayatributo establecido en none.

hiddenElements = $(':hidden');
visibleElements = $(':visible');

Para verificar un elemento en particular.

if($('#yourID:visible').length == 0)
{

}

Los elementos se consideran visibles si consumen espacio en el documento. Los elementos visibles tienen un ancho o alto mayor que cero, Referencia

También puedes usar is () con:visible

if(!$('#yourID').is(':visible'))
{

}

Si desea verificar el valor de la pantalla, puede usar css ()

if($('#yourID').css('display') == 'none')
{

}

Si está utilizando mostrar los siguientes valores displaypueden tener.

pantalla: ninguno

pantalla: en línea

bloqueo de pantalla

display: elemento de lista

pantalla: bloque en línea

Consulte la lista completa de posibles displayvalores aquí .

Para verificar la propiedad de visualización con JavaScript

var isVisible = document.getElementById("yourID").style.display == "block";
var isHidden = document.getElementById("yourID").style.display == "none";
Adil
fuente
bueno, en mi escenario, cada elemento tiene una identificación, así que el truco funciona para mí :)
Nicholas Francis
2
@NicholasFrancis, he actualizado mi respuesta para descubrir todos los elementos que están ocultos.
Adil
¿Verifica también css en línea? Tengo css display: block;escrito en línea proveniente de jquery. No puedo verificarlo con su método. ayuadame.
Gaurav Manral
¿Se agrega jQuery y está accediendo al elemento después de ser agregado a DOM? ¿Me puede mostrar el código? Sería mejor hacer una demostración en jsfiddle.net
Adil
¿Qué es el equivalente de JavaScript?
TheBlackBenzKid
56 
$("element").filter(function() { return $(this).css("display") == "none" });
Deepanshu Goyal
fuente
77
+1: Esto es realmente más útil que la respuesta aceptada para la pregunta formulada , ya que esto funcionará incluso si un elemento padre lo ha hecho style="display: none;". Las respuestas usan :visibley :hiddenfallarán si desea una visibilidad específica del elemento y un elemento primario está oculto ya que esos selectores devuelven la visibilidad general en la página (que no era la pregunta que se hizo).
Gone Coding
Esto funciona cuando se ejecuta unite test en el entorno JS DOM.
b01
Para un complemento de tabulación, se estaba configurando visibility: 'hidden';en css, por lo que la verificación también terminó comprobando:$(this).css('visibility') != 'hidden'
phyatt
30

Sí, puedes usar la función css. El siguiente buscará todos los divs, pero puede modificarlo para cualquier elemento que necesite

$('div').each(function(){

    if ( $(this).css('display') == 'none')
    {
       //do something
    }
});
jjhavokk
fuente
13

Use esta condición:

if (jQuery(".profile-page-cont").css('display') == 'block'){
    // Condition 
}
Rana
fuente
11

Hay dos métodos en jQuery para verificar la visibilidad:

$("#selector").is(":visible")

y 

$("#selector").is(":hidden")

También puede ejecutar comandos basados ​​en la visibilidad en el selector;

$("#selector:visible").hide()

o 

$("#selector:hidden").show()
Luceos
fuente
66
Nota: esto no devolverá el atributo visible específico de los elementos seleccionados, como se hace en la pregunta, ya que :visibletambién depende de la visibilidad del ancestro principal. Si un antepasado es display: nonetodos los descendientes no serán visibles independientemente del displayestado.
Se fue la codificación
10 
$('#selector').is(':visible');
Barry Chapman
fuente
3
Nota: esto no devolverá el atributo visible específico de los elementos seleccionados, como se hace en la pregunta, ya que :visibletambién depende de la visibilidad del ancestro principal. Si un antepasado es display: nonetodos los descendientes no serán visibles independientemente del displayestado.
Se fue la codificación