Seletor visible

O seletor :visible seleciona todos os elementos visíveis na página. Elementos com visibility: hidden ou com opacity: 0 são considerados visíveis, pois ocupam espaço no layout. Elementos são considerados visíveis se ocupam espaço no documento. Elementos visíveis têm altura e largura diferentes de 0. Como :visible não pertence à especificação CSS, para melhorar o desempenho em navegadores modernos é melhor primeiro filtrar os elementos com um seletor CSS puro, e depois aplicar .filter(':visible'). Rastrear a visibilidade dos elementos usando outros métodos, por exemplo, usando uma classe, pode fornecer melhor desempenho.

Sintaxe

É assim que selecionamos os elementos visíveis:

javascript$(':visible');

Exemplo

Vamos mostrar os quadradinhos invisíveis ao clicar no botão. Ao clicar nos quadradinhos "visíveis", o fundo deles mudará para amarelo:

html<button id="show">show</button>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>

cssdiv {
  width: 40px;
  height: 40px;
  margin: 5px;
  border: 2px outset green;
  float: left;
}

javascript$('div:visible').click(function() {
  $(this).css('background', 'yellow');
});

$('#show').click(function() {
  $('div:hidden').show('slow');
});

Veja também