Visible selector

De selector :visible selecteert alle zichtbare elementen op de pagina. Elementen met visibility: hidden of met opacity: 0 worden als zichtbaar beschouwd, omdat ze ruimte innemen in de lay-out. Elementen worden als zichtbaar beschouwd als ze ruimte innemen in het document. Zichtbare elementen hebben een hoogte en breedte anders dan 0. Aangezien :visible niet tot de CSS-specificatie behoort, is het voor betere prestaties in moderne browsers beter om eerst elementen te filteren met een pure CSS-selector, en vervolgens .filter(':visible') toe te passen. Het bijhouden van de zichtbaarheid van elementen met andere methoden, bijvoorbeeld met een klasse, kan betere prestaties opleveren.

Syntaxis

Zo selecteren we zichtbare elementen:

javascript$(':visible');

Voorbeeld

Laten we bij een klik op de knop de onzichtbare vierkantjes tonen. Bij het indrukken van de "zichtbare" vierkantjes verandert hun achtergrond in geel:

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

Zie ook