Selectoren visible
Selectoren :visible velger alle synlige
elementer på siden.
Elementer med visibility: hidden eller med
opacity: 0 anses som synlige fordi de opptar
plass i layouten.
Elementer anses som synlige hvis de opptar
plass i dokumentet. Synlige elementer har høyde
og bredde forskjellig fra 0.
Siden :visible ikke tilhører CSS-spesifikasjonen,
er det for bedre ytelse i moderne
nettlesere best å først filtrere elementer med
bruk av ren css-selector, og deretter
anvende .filter(':visible').
Sporing av synlighet til elementer ved hjelp av andre
metoder, for eksempel ved hjelp av en klasse, kan
gi bedre ytelse.
Syntaks
Slik velger vi synlige elementer:
$(':visible');
Eksempel
La oss ved klikk på knappen vise usynlige firkanter. Ved trykk på "synlige" firkanter vil deres bakgrunn endres til gul:
<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');
});
