Visible-valitsin

Valitsin :visible valitsee kaikki näkyvät elementit sivulla. Elementit, joilla on visibility: hidden tai opacity: 0, katsotaan näkyviksi, koska ne vievät tilaa asettelussa. Elementit katsotaan näkyviksi, jos ne vievät tilaa asiakirjassa. Näkyvillä elementeillä on korkeus ja leveys, jotka eivät ole 0. Koska :visible ei kuulu CSS-spesifikaatioon, nykyaikaisissa selaimissa on suorituskyvyn parantamiseksi parempi suodattaa elementit aluksi käyttämällä puhdasta css-valitsinta ja sitten käyttää .filter(':visible'). Elementtien näkyvyyden seuraaminen muilla tavoilla, esimerkiksi luokan avulla, voi tarjota paremman suorituskyvyn.

Syntaksi

Näin valitsemme näkyvät elementit:

javascript$(':visible');

Esimerkki

Näytetäänpainiketta napsauttamalla näkymättömät neliöt. Kun "näkyviä" neliöitä napsautetaan, niiden tausta muuttuu keltaiseksi:

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

Katso myös