Selektor visible
Selektor :visible vybírá všechny viditelné
prvky na stránce.
Prvky s visibility: hidden nebo s
opacity: 0 jsou považovány za viditelné, protože zabírají
místo v rozložení.
Prvky jsou považovány za viditelné, pokud zabírají
místo v dokumentu. Viditelné prvky mají výšku
a šířku odlišnou od 0.
Protože :visible nepatří do CSS specifikace,
pro zlepšení výkonu v moderních
prohlížečích je lepší nejprve odfiltrovat prvky
pomocí čistého css-selektoru a poté
použít .filter(':visible').
Sledování viditelnosti prvků pomocí jiných
metod, například pomocí třídy, může
poskytnout lepší výkon.
Syntaxe
Takto vybereme viditelné prvky:
$(':visible');
Příklad
Pojďme po kliknutí na tlačítko zobrazit neviditelné čtverečky. Po stisknutí "viditelných" čtverečků jejich pozadí se změní na žluté:
<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');
});
