Visible selector

Selectoren :visible vælger alle synlige elementer på siden. Elementer med visibility: hidden eller med opacity: 0 betragtes som synlige, da de optager plads i layoutet. Elementer betragtes som synlige, hvis de optager plads i dokumentet. Synlige elementer har en højde og bredde forskellig fra 0. Da :visible ikke hører til CSS-specifikationen, er det for bedre ydeevne i moderne browsere bedst at filtrere elementerne først med brug af en ren css-selector, og derefter anvende .filter(':visible'). Sporing af elementers synlighed ved hjælp af andre metoder, for eksempel ved hjælp af en klasse, kan sikre bedre ydeevne.

Syntaks

Sådan vælger vi synlige elementer:

javascript$(':visible');

Eksempel

Lad os ved klik på knappen vise de usynlige firkanter. Ved tryk på de "synlige" firkanter vil deres baggrund blive ændret til gul:

html<button id="show">vis</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å