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

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