Visible selector
De selector :visible selecteert alle zichtbare
elementen op de pagina.
Elementen met visibility: hidden of met
opacity: 0 worden als zichtbaar beschouwd, omdat ze ruimte innemen
in de lay-out.
Elementen worden als zichtbaar beschouwd als ze ruimte innemen
in het document. Zichtbare elementen hebben een hoogte
en breedte anders dan 0.
Aangezien :visible niet tot de CSS-specificatie behoort,
is het voor betere prestaties in moderne
browsers beter om eerst elementen te filteren met
een pure CSS-selector, en vervolgens
.filter(':visible') toe te passen.
Het bijhouden van de zichtbaarheid van elementen met andere
methoden, bijvoorbeeld met een klasse, kan
betere prestaties opleveren.
Syntaxis
Zo selecteren we zichtbare elementen:
$(':visible');
Voorbeeld
Laten we bij een klik op de knop de onzichtbare vierkantjes tonen. Bij het indrukken van de "zichtbare" vierkantjes verandert hun achtergrond in geel:
<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');
});
