Visible selector
Selectoren :visible vælger alle synlige
elementer på siden.
Elementer med visibility: hidden eller med
opacity: 0 betragtes som synlige, da de optager
plads i layoutet.
Elementer betragtes som synlige, hvis de optager
plads i dokumentet. Synlige elementer har en højde
og bredde forskellig fra 0.
Da :visible ikke hører til CSS-specifikationen,
er det for bedre ydeevne i moderne
browsere bedst at filtrere elementerne først med
brug af en ren css-selector, og derefter
anvende .filter(':visible').
Sporing af elementers synlighed ved hjælp af andre
metoder, for eksempel ved hjælp af en klasse, kan
sikre bedre ydeevne.
Syntaks
Sådan vælger vi synlige elementer:
$(':visible');
Eksempel
Lad os ved klik på knappen vise de usynlige firkanter. Ved tryk på de "synlige" firkanter vil deres baggrund blive ændret til gul:
<button id="show">vis</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');
});
