Selektor visible

Selektor :visible valib kõik lehel nähtavad elemendid. Elemendid, millel on visibility: hidden või opacity: 0, loetakse nähtavateks, kuna nad võtavad ruumi lehekülje paigutuses. Elemendid loetakse nähtavateks, kui nad võtavad ruumi dokumendis. Nähtavatel elementidel on kõrgus ja laius, mis ei ole 0. Kuna :visible ei kuulu CSS-i spetsifikatsiooni, siis kaasaegsetes brauserites on jõudluse parandamiseks soovitatav kõigepealt filtreerida elemendid kasutades puhtaid CSS-selektoreid ning seejärel rakendada .filter(':visible'). Elementide nähtavuse jälgimine teiste meetoditega, näiteks klassi abil, võib pakkuda paremat jõudlust.

Süntaks

Nii valime nähtavad elemendid:

javascript$(':visible');

Näide

Klõpsuga nupul näitame peidetud ruudud. "Nähtavatele" ruutudele vajutamisel muudetakse nende taust kollaseks:

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

Vaata ka