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:

javascript$(':visible');

Przykład

Kliknij przycisk, aby pokazać niewidoczne kwadraty. Po naciśnięciu na "widoczne" kwadraty ich tło zmieni się na żółte:

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');
});

Zobacz też