Como verificar se um item está oculto no jQuery?

Você pode alternar a visibilidade do item usando as .hide() , .show() ou .toggle() .

Como você testaria se um item está visível ou oculto?

6967
07 окт. Philip Morton perguntou 07 de outubro. 2008-10-07 16:03 '08 às 4:03 pm 2008-10-07 16:03
@ 56 respostas
  • 1
  • 2

Como a questão está relacionada a um elemento, esse código pode ser mais apropriado:

 // Checks css for display:[none|block], ignores visibility:[true|false] $(element).is(":visible"); // The same works with hidden $(element).is(":hidden"); 

O mesmo que a proposta Vinte , mas aplicada a um único elemento; e isso corresponde ao algoritmo recomendado no FAQ do jQuery

8594
07 окт. resposta é dada Tsvetomir Tsonev 07 de outubro . 2008-10-07 16:30 '08 às 4:30 pm 2008-10-07 16:30

Você pode usar o seletor hidden :

 // Matches all elements that are hidden $('element:hidden') 
border=0

Seletor visible :

 // Matches all elements that are visible $('element:visible') 
1318
07 окт. resposta dada twernt 07 out 2008-10-07 16:16 '08 at 4:16 pm 2008-10-07 16:16
 if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){ // element is hidden } 

O método acima não leva em conta a visibilidade do pai. Para visualizar um pai, você deve usar .is(":hidden") ou .is(":visible") .

Por exemplo

 <div id="div1" style="display:none"> <div id="div2" style="display:block">Div2</div> </div> 

O método acima tratará div2 visível e :visible não. Mas o acima pode ser útil em muitos casos, especialmente quando você precisa descobrir se há algum erro div visível no elemento pai oculto, porque sob essas condições :visible não funcionará.

831
07 окт. resposta dada a Mote 07 de outubro. 2008-10-07 16:09 '08 at 4:09 pm 2008-10-07 16:09

Nenhuma dessas respostas diz respeito ao que eu entendo, e esta é a pergunta que eu estava procurando: "Como processar elementos com visibility: hidden ?". Nem :visible , nem :hidden não irá lidar com isso, pois ambos procuram o mapeamento na documentação. Tanto quanto eu posso dizer, não há seletor para lidar com a visibilidade CSS. Aqui está como eu resolvi isso (seletores padrão do jQuery, talvez uma sintaxe mais concisa):

 $(".item").each(function() { if ($(this).css("visibility") == "hidden") { // handle non visible state } else { // handle visible state } }); 
474
24 марта '11 в 21:44 2011-03-24 21:44 a resposta é dada por aaronLile March 24 '11 at 21:44 2011-03-24 21:44

De como determinar o estado do item comutado?


Você pode determinar se um elemento é compilado ou não usando os seletores :visible e :hidden .

 var isVisible = $('#myDiv').is(':visible'); var isHidden = $('#myDiv').is(':hidden'); 

Se você simplesmente atua em um elemento com base em sua aparência, pode simplesmente incluir :visible ou :hidden na expressão do seletor. Por exemplo:

  $('#myDiv:visible').animate({left: '+=200px'}, 'slow'); 
343
14 янв. a resposta é dada por user574889 14 de jan 2011-01-14 00:13 '11 às 0:13 2011-01-14 00:13

Muitas vezes, ao verificar se algo está visível ou não, você vai imediatamente para a frente e faz outra coisa com ele. A cadeia jQuery facilita isso.

Portanto, se você tiver um seletor e quiser executar alguma ação nele, somente se ele estiver visível ou oculto, será possível usar filter(":visible") ou filter(":hidden") e vinculá-lo a ação que você quer fazer.

Então, ao invés de uma if , por exemplo:

 if ($('#btnUpdate').is(":visible")) { $('#btnUpdate').animate({ width: "toggle" }); // Hide button } 

Ou mais eficaz, mas ainda mais feia:

 var button = $('#btnUpdate'); if (button.is(":visible")) { button.animate({ width: "toggle" }); // Hide button } 

Você pode fazer tudo em uma linha:

 $('#btnUpdate').filter(":visible").animate({ width: "toggle" }); 
253
25 июля '09 в 13:21 2009-07-25 13:21 a resposta é dada Simon_Weaver July 25, '09 at 13:21 2009-07-25 13:21

Seletor :visible acordo com a documentação do jQuery :

  • Eles têm display valor de CSS none .
  • Estes são os elementos de formulário com type="hidden" .
  • Sua largura e altura estão claramente definidas como 0.
  • O elemento pai está oculto, portanto, o elemento não é exibido na página.

Itens com visibility: hidden ou opacity: 0 são considerados visíveis, pois ainda consomem espaço no layout.

Isso é útil em alguns casos e inútil para outros, porque se você quiser verificar se um elemento está visível ( display != none ), ignorando a visibilidade dos elementos pai, você verá que executar .css("display") == 'none' ocorre não só mais rápido, mas também retorna a exatidão da visibilidade.

Se você quiser verificar a visibilidade em vez da exibição, use: .css("visibility") == "hidden" .

Observe também as notas adicionais do jQuery :

Como :visible é uma extensão do jQuery e não faz parte da especificação CSS, as consultas que usam :visible não podem aproveitar as melhorias de desempenho fornecidas pelo método querySelectorAll() DOM. Para obter o melhor desempenho ao usar :visible para selecionar elementos, primeiro selecione elementos usando o seletor CSS puro e, em seguida, use .filter(":visible") .

Além disso, se você está preocupado com o desempenho, você deve verificar agora que você me vê ... mostrar / ocultar o desempenho (2010-05-04) e usar outros métodos para exibir e ocultar elementos.

206
25 нояб. A resposta é dada por Pedro Rainho em 25 de novembro. 2011-11-25 12:16 '11 às 12:16 2011-11-25 12:16

Isso funciona para mim, e eu uso show() e hide() para tornar meu div oculto / visível:

 if( $(this).css('display') == 'none' ){  } else {  } 
187
06 июля '11 в 23:19 2011-07-06 23:19 a resposta é dada por Abiy em 06 de julho '11 às 23:19 2011-07-06 23:19

Como a visibilidade dos elementos e o trabalho do jQuery

O elemento pode ser oculto usando display:none , visibility:hidden ou opacity:0 . A diferença entre esses métodos:

  • display:none oculta o item e não ocupa nenhum espaço;
  • visibility:hidden oculta o item, mas ainda ocupa espaço no layout;
  • opacity:0 oculta o item como "visível: oculto" e ainda ocupa espaço no layout; a única diferença é que a opacidade permite que o elemento seja parcialmente transparente;

     if ($('.target').is(':hidden')) { $('.target').show(); } else { $('.target').hide(); } if ($('.target').is(':visible')) { $('.target').hide(); } else { $('.target').show(); } if ($('.target-visibility').css('visibility') == 'hidden') { $('.target-visibility').css({ visibility: "visible", display: "" }); } else { $('.target-visibility').css({ visibility: "hidden", display: "" }); } if ($('.target-visibility').css('opacity') == "0") { $('.target-visibility').css({ opacity: "1", display: "" }); } else { $('.target-visibility').css({ opacity: "0", display: "" }); } 

    Métodos úteis de troca de jQuery:

     $('.click').click(function() { $('.target').toggle(); }); $('.click').click(function() { $('.target').slideToggle(); }); $('.click').click(function() { $('.target').fadeToggle(); }); 
181
25 апр. a resposta é dada por webvitaly 25 de abril 2012-04-25 00:04 '12 at 12:04 AM 2012-04-25 00:04

Eu usaria classe CSS .hide { display: none!important; } .hide { display: none!important; } .

Para ocultar / mostrar, eu chamo .addClass("hide")/.removeClass("hide") . Para verificar a visibilidade, eu uso .hasClass("hide") .

Esta é uma maneira simples e direta de verificar / ocultar / mostrar itens se você não planeja usar os .toggle() ou .animate() .

145
03 февр. resposta dada por Evgeny Levin 03 fev. 2012-02-03 19:04 '12 às 19:04 2012-02-03 19:04

Você também pode fazer isso usando javascript simples:

 function isRendered(domObj) { if ((domObj.nodeType != 1) || (domObj == document.body)) { return true; } if (domObj.currentStyle  domObj.currentStyle["display"] != "none"  domObj.currentStyle["visibility"] != "hidden") { return isRendered(domObj.parentNode); } else if (window.getComputedStyle) { var cs = document.defaultView.getComputedStyle(domObj, null); if (cs.getPropertyValue("display") != "none"  cs.getPropertyValue("visibility") != "hidden") { return isRendered(domObj.parentNode); } } return false; } 

Notas:

  • Funciona em todos os lugares

  • Funciona para itens aninhados

  • Funciona para CSS e estilos inline.

  • Nenhum quadro requerido

140
16 июля '12 в 22:18 2012-07-16 22:18 a resposta é dada por Matt Brock 16 de julho, '12 at 10:18 pm 2012-07-16 22:18

Você pode simplesmente usar o atributo hidden ou visible , por exemplo:

 $('element:hidden') $('element:visible') 

Ou você pode simplificar a mesma coisa com o seguinte.

 $(element).is(":visible") 
120
23 мая '12 в 15:59 2012-05-23 15:59 a resposta é dada ScoRpion 23 de maio de '12 at 3:59 pm 2012-05-23 15:59

Outra resposta que você precisa levar em conta: se você ocultar um elemento, você deve usar o jQuery , mas em vez de ocultá-lo, você exclui todo o elemento, mas copia seu HTML e a própria tag na variável jQuery e depois você precisa fazer é um teste se houver tal tag na tela, usando o usual if (!$('#thetagname').length) .

110
22 апр. a resposta é dada por think123 22 de abril 2012-04-22 02:40 '12 às 2:40 2012-04-22 02:40

Link de demonstração

Fonte:

Plug and Play do Blogger - Ferramentas e Widgets do jQuery: Como saber se um item está oculto ou visível usando jQuery

105
25 янв. Resposta é Code Spy 25 de janeiro 2013-01-25 08:34 '13 às 8:34 2013-01-25 08:34

ebdiv deve ser definido para style="display:none;" Isso funciona tanto para mostrar quanto para esconder:

 $(document).ready(function(){ $("#eb").click(function(){ $("#ebdiv").toggle(); }); }); 
103
13 июня '12 в 16:20 2012-06-13 16:20 a resposta é dada por Vaishu 13 de junho '12 às 16:20 2012-06-13 16:20

Ao testar um elemento com um seletor :hidden no jQuery, deve-se levar em conta que um elemento com um local absoluto pode ser reconhecido como oculto, embora seus elementos filhos estejam visíveis .

No começo, isso parece um tanto contra-intuitivo - embora uma análise mais detalhada da documentação do jQuery forneça informações relevantes:

Os elementos podem ser considerados ocultos por várias [...] razões: a largura e a altura estão claramente definidas [...]

Então, realmente faz sentido com relação ao modelo de caixa e ao estilo calculado para o elemento. Mesmo que a largura e a altura não sejam definidas explicitamente como 0, elas podem ser configuradas implicitamente.

Veja o seguinte exemplo:

 .foo { position: absolute; left: 10px; top: 10px; background: #ff0000; } .bar { position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; background: #0000ff; } 
http://jsfiddle.net/pM2q3/7/ 

O mesmo JS terá essa saída:

 console.log($('.foo').is(':hidden')); // false console.log($('.bar').is(':hidden')); // false 
85
06 мая '14 в 13:50 2014-05-06 13:50 a resposta é dada conceptdeluxe May 06 '14 at 13:50 2014-05-06 13:50

Pode funcionar:

 expect($("#message_div").css("display")).toBe("none"); 
82
20 июля '12 в 15:44 2012-07-20 15:44 a resposta é dada por Maneesh Kumar 20 de julho, '12 at 15:44 2012-07-20 15:44

Exemplo:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="checkme" class="product" style="display:none"> <span class="itemlist"><!-- Shows Results for Fish --></span> Category:Fish <br>Product: Salmon Atlantic <br>Specie: Salmo salar <br>Form: Steaks </div> 
62
28 окт. Resposta dada por Irfan DANISH 28 de out 2013-10-28 09:43 '13 às 9:43 2013-10-28 09:43

Para verificar se isso não é visível, eu uso ! :

 if ( !$('#book').is(':visible')) { alert('#book is not visible') } 

Ou o seguinte: sam, mantendo o seletor jQuery em uma variável para ter melhor desempenho quando você precisar dele várias vezes:

 var $book = $('#book') if(!$book.is(':visible')) { alert('#book is not visible') } 
61
04 июня '13 в 16:42 2013-06-04 16:42 a resposta é dada por Matthias Wegtun em 04 de junho '13 at 4:42 2013-06-04 16:42

Use a troca de classe, não a edição de estilo.

O uso de classes criadas para "ocultar" elementos é simples, bem como um dos métodos mais eficazes. Mudar a classe 'hidden' com o tipo Display 'none' será mais rápido do que editar este estilo diretamente. Expliquei detalhadamente algumas dessas questões na questão da Rotação de dois elementos visíveis / ocultos no mesmo div .


Recomendações e otimização para JavaScript

Aqui está um vídeo verdadeiramente instrutivo sobre o Google Tech Talk, do engenheiro-chefe do Google, Nicholas Zakas:

59
19 июля '13 в 0:17 2013-07-19 00:17 a resposta é dada Lopsided 19 de julho, '13 em 0:17 2013-07-19 00:17

Um exemplo de como usar a verificação visível de um bloco de anúncios:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="ad-placement" id="ablockercheck"></div> <div id="ablockermsg" style="display: none"></div> 

"ablockercheck" é um identificador que bloqueia um bloco. Portanto, ao verificar isso, se estiver visível, você poderá detectar se o bloco de anúncios está ativado.

55
27 апр. a resposta é dada romana Losev 27 abr. 2015-04-27 10:57 '15 às 10:57 2015-04-27 10:57

No final, nenhum dos exemplos me serviu, então eu escrevi o meu.

Testes (sem o filter:alpha suporte do Internet Explorer filter:alpha ):

a) Verifique se o documento está oculto

b) Verifique se o elemento tem largura / altura / opacidade zero ou display:none / visibility:hidden nos estilos internos.

c) Certifique-se de que o centro (também porque é mais rápido do que testar cada pixel / canto) do elemento não está oculto por outro elemento (e todos os ancestrais, por exemplo: overflow:hidden / rolagem / um elemento em vez de outro) ou

d) Verifique se o elemento possui largura / altura / opacidade zero ou display:none / visibility: oculto em estilos computados (entre todos os ancestrais)

Testado

Android 4.4 (próprio navegador / Chrome / Firefox), Firefox (Windows / Mac), Chrome (Windows / Mac), Opera (Windows Presto / Mac Webkit), Internet Explorer (modos Internet Explorer 5-11 + Internet Explorer 8 em uma máquina virtual ), Safari (Windows / Mac / iOS)

 var is_visible = (function () { var x = window.pageXOffset ? window.pageXOffset + window.innerWidth - 1 : 0, y = window.pageYOffset ? window.pageYOffset + window.innerHeight - 1 : 0, relative = !!((!x  !y) || !document.elementFromPoint(x, y)); function inside(child, parent) { while(child){ if (child === parent) return true; child = child.parentNode; } return false; }; return function (elem) { if ( document.hidden || elem.offsetWidth==0 || elem.offsetHeight==0 || elem.style.visibility=='hidden' || elem.style.display=='none' || elem.style.opacity===0 ) return false; var rect = elem.getBoundingClientRect(); if (relative) { if (!inside(document.elementFromPoint(rect.left + elem.offsetWidth/2, rect.top + elem.offsetHeight/2),elem)) return false; } else if ( !inside(document.elementFromPoint(rect.left + elem.offsetWidth/2 + window.pageXOffset, rect.top + elem.offsetHeight/2 + window.pageYOffset), elem) || ( rect.top + elem.offsetHeight/2 < 0 || rect.left + elem.offsetWidth/2 < 0 || rect.bottom - elem.offsetHeight/2 > (window.innerHeight || document.documentElement.clientHeight) || rect.right - elem.offsetWidth/2 > (window.innerWidth || document.documentElement.clientWidth) ) ) return false; if (window.getComputedStyle || elem.currentStyle) { var el = elem, comp = null; while (el) { if (el === document) {break;} else if(!el.parentNode) return false; comp = window.getComputedStyle ? window.getComputedStyle(el, null) : el.currentStyle; if (comp  (comp.visibility=='hidden' || comp.display == 'none' || (typeof comp.opacity !=='undefined'  comp.opacity != 1))) return false; el = el.parentNode; } } return true; } })(); 

Como usar:

 is_visible(elem) // boolean 
55
09 апр. a resposta é dada Aleko 09 abr. 2014-04-09 20:06 '14 às 20:06 2014-04-09 20:06

Você precisa verificar ambos ... Exibir e também visibilidade:

 if ($(this).css("display") == "none" || $(this).css("visibility") == "hidden") { // The element is not visible } else { // The element is visible } 

Se nós verificarmos $(this).is(":visible") , o jQuery verifica automaticamente ambas as coisas.

50
31 янв. a resposta é dada por Premshankar Tiwari em 31 de janeiro 2014-01-31 09:24 '14 às 9:24 AM 2014-01-31 09:24

Talvez você possa fazer algo assim.

 <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <input type="text" id="tElement" style="display:block;">Firstname</input> 
38
07 апр. Resposta dada por Mathias Stavrou 07 abr 2015-04-07 15:26 '15 às 15:26 2015-04-07 15:26

Como os Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout (como descrito para jQuery: seletor visível ) - podemos verificar se o elemento é visível desta maneira:

 function isElementReallyHidden (el) { return $(el).is(":hidden") || $(el).css("visibility") == "hidden" || $(el).css('opacity') == 0; } var booElementReallyShowed = !isElementReallyHidden(someEl); $(someEl).parents().each(function () { if (isElementReallyHidden(this)) { booElementReallyShowed = false; } }); 
32
19 марта '14 в 15:42 2014-03-19 15:42 a resposta é dada por Andron 19 de março de '14 at 15:42 2014-03-19 15:42
 if($('#postcode_div').is(':visible')) { if($('#postcode_text').val()=='') { $('#spanPost').text('\u00a0'); } else { $('#spanPost').text($('#postcode_text').val()); } 
30
15 нояб. a resposta é dada por Gaurav em 15 de novembro. 2013-11-15 13:41 '13 às 13:41 2013-11-15 13:41

Mas e se o elemento CSS se parece com isso?

 .element{ position: absolute;left:-9999; } 

Portanto, esta é a resposta para a questão de estouro de pilha. Como verificar se um item está fora da tela também deve ser considerado.

30
23 авг. a resposta é dada por RN Kushwaha 23 ago. 2014-08-23 23:53 '14 às 23:53 2014-08-23 23:53

Basta verificar a visibilidade, verificando o valor lógico, por exemplo:

 if (this.hidden === false) { // Your code } 

Eu usei esse código para cada função. Caso contrário, você pode usar is(':visible') para verificar a visibilidade do elemento.

30
11 авг. a resposta é dada pixellabme 11 ago. 2014-08-11 08:28 '14 às 8:28 2014-08-11 08:28

Uma função pode ser criada para verificar os atributos de visibilidade / exibição para determinar se um elemento é exibido na interface do usuário ou não.

 function checkUIElementVisible(element) { return ((element.css('display') !== 'none')  (element.css('visibility') !== 'hidden')); } 

Roteiro de trabalho

29
29 авг. a resposta é dada V31 29 ago. 2014-08-29 23:20 '14 às 23:20 2014-08-29 23:20

Há também uma expressão condicional ternária para verificar o estado do elemento e, em seguida, para alterná-lo:

 $('someElement').on('click', function(){ $('elementToToggle').is(':visible') ? $('elementToToggle').hide('slow') : $('elementToToggle').show('slow'); }); 
29
06 нояб. Resposta dada por cssimsek 06 nov 2013-11-06 02:32 '13 às 2:32 2013-11-06 02:32
  • 1
  • 2

Outras perguntas sobre labels or Faça uma pergunta