A hidden szelektor

A :hidden szelektor az oldalon lévő összes olyan elemet kiválasztja, amelyek rejtve vannak. A visibility: hidden vagy opacity: 0 stílusú elemek láthatónak számítanak, mivel helyet foglalnak a elrendezésben. Az elemek több okból is tekinthetők láthatatlannak: a css display tulajdonság értéke none, vagy olyan elemek, amelyeknek type="hidden" attribútumuk van, vagy a magasságuk vagy szélességük 0 értékre van állítva, vagy a szülőelemük rejtett. Mivel a :hidden nem része a CSS specifikációnak, a jobb teljesítmény érdekében a modern böngészőkben érdemes először tiszta css-szelektorral szűrni az elemeket, majd alkalmazni a .filter(':hidden') metódust. Az elemek láthatóságának nyomon követése más módszerekkel, például egy osztállyal, jobb teljesítményt biztosíthat.

Szintaxis

Így választjuk ki a rejtett elemeket:

javascript$(':hidden');

Példa

A #test gombra kattintva mutassuk meg a láthatatlan négyzeteket:

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

Lásd még