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

Respostas:

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