Selektor visible

Selektor :visible vyberá všetky viditeľné prvky na stránke. Prvky s visibility: hidden alebo s opacity: 0 sa považujú za viditeľné, pretože zaberajú miesto v rozložení. Prvky sa považujú za viditeľné, ak zaberajú miesto v dokumente. Viditeľné prvky majú výšku a šírku odlišnú od 0. Pretože :visible nepatrí do CSS špecifikácie, pre zlepšenie výkonu v moderných prehliadačoch je lepšie najprv prefiltrovať prvky s použitím čistého css-selektora, a potom aplikovať .filter(':visible'). Sledovanie viditeľnosti prvkov pomocou iných metód, napríklad pomocou triedy, môže zabezpečiť lepší výkon.

Syntax

Takto vyberáme viditeľné prvky:

javascript$(':visible');

Príklad

Po kliknutí na tlačidlo ukážeme neviditeľné štvorčeky. Pri stlačení na "viditeľné" štvorčeky ich pozadie sa zmení na žlté:

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

Pozri tiež