Selektor visible

Selektor :visible vybírá všechny viditelné prvky na stránce. Prvky s visibility: hidden nebo s opacity: 0 jsou považovány za viditelné, protože zabírají místo v rozložení. Prvky jsou považovány za viditelné, pokud zabírají místo v dokumentu. Viditelné prvky mají výšku a šířku odlišnou od 0. Protože :visible nepatří do CSS specifikace, pro zlepšení výkonu v moderních prohlížečích je lepší nejprve odfiltrovat prvky pomocí čistého css-selektoru a poté použít .filter(':visible'). Sledování viditelnosti prvků pomocí jiných metod, například pomocí třídy, může poskytnout lepší výkon.

Syntaxe

Takto vybereme viditelné prvky:

javascript$(':visible');

Příklad

Pojďme po kliknutí na tlačítko zobrazit neviditelné čtverečky. Po stisknutí "viditelných" čtverečků jejich pozadí se změní na žluté:

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

Viz také