Selectoren visible

Selectoren :visible velger alle synlige elementer på siden. Elementer med visibility: hidden eller med opacity: 0 anses som synlige fordi de opptar plass i layouten. Elementer anses som synlige hvis de opptar plass i dokumentet. Synlige elementer har høyde og bredde forskjellig fra 0. Siden :visible ikke tilhører CSS-spesifikasjonen, er det for bedre ytelse i moderne nettlesere best å først filtrere elementer med bruk av ren css-selector, og deretter anvende .filter(':visible'). Sporing av synlighet til elementer ved hjelp av andre metoder, for eksempel ved hjelp av en klasse, kan gi bedre ytelse.

Syntaks

Slik velger vi synlige elementer:

javascript$(':visible');

Eksempel

La oss ved klikk på knappen vise usynlige firkanter. Ved trykk på "synlige" firkanter vil deres bakgrunn endres til gul:

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

Se også