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:

javascript$(':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:

html<button id="show">show</button>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>

cssdiv {
  width: 40px;
  height: 40px;
  margin: 5px;
  border: 2px outset green;
  float: left;
}

javascript$('div:visible').click(function() {
  $(this).css('background', 'yellow');
});

$('#show').click(function() {
  $('div:hidden').show('slow');
});

Siehe auch