Selektor visible
Selektor :visible vyberá všetky viditeľné
prvky na stránke.
Prvky s visibility: hidden alebo s
opacity: 0 sa považujú za viditeľné, pretože zaberajú
miesto v rozložení.
Prvky sa považujú za viditeľné, ak zaberajú
miesto v dokumente. Viditeľné prvky majú výšku
a šírku odlišnú od 0.
Pretože :visible nepatrí do CSS špecifikácie,
pre zlepšenie výkonu v moderných
prehliadačoch je lepšie najprv prefiltrovať prvky s
použitím čistého css-selektora, a potom
aplikovať .filter(':visible').
Sledovanie viditeľnosti prvkov pomocou iných
metód, napríklad pomocou triedy, môže
zabezpečiť lepší výkon.
Syntax
Takto vyberáme viditeľné prvky:
$(':visible');
Príklad
Po kliknutí na tlačidlo ukážeme neviditeľné štvorčeky. Pri stlačení na "viditeľné" štvorčeky ich pozadie sa zmení na žlté:
<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');
});
