Selektor visible
Selektor :visible wybiera wszystkie widoczne
elementy na stronie.
Elementy z visibility: hidden lub z
opacity: 0 są uważane za widoczne, ponieważ zajmują
miejsce w układzie.
Elementy są uważane za widoczne, jeśli zajmują
miejsce w dokumencie. Widoczne elementy mają wysokość
i szerokość różne od 0.
Ponieważ :visible nie należy do specyfikacji CSS,
to dla poprawy wydajności w nowoczesnych
przeglądarkach lepiej najpierw odfiltrować elementy z
wykorzystaniem czystego selektora css, a następnie
zastosować .filter(':visible').
Śledzenie widoczności elementów za pomocą innych
metod, na przykład, za pomocą klasy, może
zapewnić lepszą wydajność.
Składnia
Tak wybieramy widoczne elementy:
$(':visible');
Przykład
Kliknij przycisk, aby pokazać niewidoczne kwadraty. Po naciśnięciu na "widoczne" kwadraty ich tło zmieni się na żółte:
<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');
});
