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:
$(':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:
<button id="show">show</button>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
div {
width: 40px;
height: 40px;
margin: 5px;
border: 2px outset green;
float: left;
}
$('div:visible').click(function() {
$(this).css('background', 'yellow');
});
$('#show').click(function() {
$('div:hidden').show('slow');
});
