Selektor visible

Selektor :visible bira sve vidljive elemente na stranici. Elementi sa visibility: hidden ili sa opacity: 0 smatraju se vidljivim, jer zauzimaju mesto u layout-u. Elementi se smatraju vidljivim ako zauzimaju mesto u dokumentu. Vidljivi elementi imaju visinu i širinu različite od 0. Pošto :visible ne pripada CSS specifikaciji, za bolju performansu u modernim browser-ima je bolje prvo filtrirati elemente koristeći čisti css-selektor, a zatim primeniti .filter(':visible'). Praćenje vidljivosti elemenata pomoću drugih metoda, na primer, pomoću klase, može obezbediti bolje performanse.

Sintaksa

Ovako biramo vidljive elemente:

javascript$(':visible');

Primer

Hajde da klikom na dugme prikažemo nevidljive kvadrate. Kada se klikne na "vidljive" kvadrate njihova pozadina će se promeniti u žutu:

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

Videti takođe