Hidden selector

De selector :hidden selecteert alle elementen op de pagina die verborgen zijn. Elementen met visibility: hidden of met opacity: 0 worden als zichtbaar beschouwd, omdat ze ruimte innemen in de lay-out. Elementen kunnen om verschillende redenen als onzichtbaar worden beschouwd: de waarde van de css-eigenschap display is none, of het zijn elementen met het attribuut type="hidden", of hun hoogte of breedte is ingesteld op 0, of hun bovenliggende element is verborgen. Omdat :hidden niet tot de CSS-specificatie behoort, is het voor betere prestaties in moderne browsers beter om eerst elementen te filteren met behulp van een pure css-selector, en vervolgens .filter(':hidden') 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 verborgen elementen:

javascript$(':hidden');

Voorbeeld

Laten we op klik op de knop #test de onzichtbare vierkantjes tonen:

html<button id="test">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$('#test').click(function() {
  $('div:hidden').show('slow');
});

Zie ook

  • de selector visible,
    die alle zichtbare elementen op de pagina selecteert
  • de methode filter,
    die elementen in een set filtert op basis van een opgegeven selector
  • de methode hide,
    die elementen soepel verbergt