Verifique, usando jQuery, se um elemento é 'display: none' ou bloco ao clicar

239

Quero verificar e classificar os elementos que estão ocultos. É possível encontrar todos os elementos com atributo displaye valor none?

jquery css

— Nicholas Francis
fonte

542

Você pode usar : visible para elementos visíveis e : hidden para descobrir elementos ocultos. Este elementos ocultos têm displayatributo definido como none.

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

Para verificar um elemento específico.

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

}

Os elementos são considerados visíveis se consumirem espaço no documento. Os elementos visíveis têm uma largura ou altura maior que zero, Referência

Você também pode usar is () com:visible

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

}

Se você deseja verificar o valor da exibição, pode usar css ()

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

}

Se você estiver usando o display, os seguintes valores displaypodem ter.

Mostrar nenhum

display: embutido

display: bloco

display: item de lista

display: bloco embutido

Verifique a lista completa de displayvalores possíveis aqui .

Para verificar a propriedade de exibição com JavaScript

var isVisible = document.getElementById("yourID").style.display == "block";
var isHidden = document.getElementById("yourID").style.display == "none";

— Adil
fonte

Bem, no meu cenário, cada elemento tem um ID, então o truque funciona para mim :)

— Nicholas Francis

2

@NicholasFrancis, atualizei minha resposta para descobrir todos os elementos que estão ocultos.

— Adil

Ele também verifica CSS embutido. Eu tenho css display: block;escrito em linha vindo de jquery. Não consigo verificar com o seu método. Ajude-me.

— Gaurav Manral

O jQuery foi adicionado e você está acessando o elemento após ser adicionado ao DOM? Você pode me mostrar o código? Seria melhor para fazer uma demonstração sobre jsfiddle.net

— Adil

Qual é o equivalente do JavaScript?

— TheBlackBenzKid

56

$("element").filter(function() { return $(this).css("display") == "none" });

— Deepanshu Goyal
fonte

7

+1: na verdade, é mais útil do que a resposta aceita para a pergunta , pois isso funcionará mesmo se um elemento pai tiver style="display: none;". As respostas usam :visiblee :hiddenfalharão se você desejar visibilidade específica do elemento e se um elemento pai estiver oculto, pois esses seletores retornam visibilidade geral na página (que não foi a pergunta feita).

— Gone Coding

Isso funciona ao executar o teste unido no ambiente JS DOM.

— 1801

Para um plugin de tabulação, ele estava visibility: 'hidden';$(this).css('visibility') != 'hidden'

— definido

30

Sim, você pode usar a função css. O abaixo pesquisará todas as divs, mas você pode modificá-lo para quaisquer elementos que precisar

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

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

— jjhavokk
fonte

13

Use esta condição:

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

— Rana
fonte

11

Existem dois métodos no jQuery para verificar a visibilidade:

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

e

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

Você também pode executar comandos com base na visibilidade no seletor;

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

ou

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

— Luceos
fonte

6

Nota: isso não retornará o atributo visível específico dos elementos selecionados, conforme a pergunta, pois :visibletambém depende da visibilidade do ancestral pai. Se um ancestral for display: nonetodos os descendentes, não serão visíveis, independentemente do displayestado.

— Gone Coding

10

$('#selector').is(':visible');

— Barry Chapman
fonte

3

Nota: isso não retornará o atributo visível específico dos elementos selecionados, conforme a pergunta, pois :visibletambém depende da visibilidade do ancestral pai. Se um ancestral for display: nonetodos os descendentes, não serão visíveis, independentemente do displayestado.

— Gone Coding