Selektor visible
Der Selektor :visible wählt alle sichtbaren
Elemente auf der Seite aus.
Elemente mit visibility: hidden oder mit
opacity: 0 gelten als sichtbar, da sie Platz im
Layout belegen.
Elemente gelten als sichtbar, wenn sie Platz im
Dokument belegen. Sichtbare Elemente haben eine Höhe
und Breite ungleich 0.
Da :visible nicht zur CSS-Spezifikation gehört,
ist es für eine bessere Leistung in modernen
Browsern empfehlenswert, zunächst die Elemente mit
einem reinen CSS-Selektor zu filtern und dann
.filter(':visible') anzuwenden.
Das Verfolgen der Sichtbarkeit von Elementen mit anderen
Methoden, beispielsweise mit einer Klasse, kann
eine bessere Leistung bieten.
Syntax
So wählen wir sichtbare Elemente aus:
$(':visible');
Beispiel
Lassen Sie uns beim Klick auf einen Button die unsichtbaren Quadrate anzeigen. Beim Klicken auf die "sichtbaren" Quadrate wird deren Hintergrundfarbe auf gelb geändert:
<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');
});
