Sélecteur hidden
Le sélecteur :hidden sélectionne tous les éléments sur
la page qui sont cachés.
Les éléments avec visibility: hidden ou avec
opacity: 0 sont considérés comme visibles, car ils occupent
de l'espace dans la mise en page. Les éléments peuvent être considérés comme invisibles
pour plusieurs raisons : la valeur de la propriété CSS
display est none, ou ce sont des éléments avec
l'attribut type="hidden",
ou leur hauteur ou largeur est définie à 0,
ou leur élément parent est caché.
Étant donné que :hidden n'appartient pas à la spécification CSS,
pour améliorer les performances dans les navigateurs modernes,
il est préférable de d'abord filtrer les éléments avec
un sélecteur CSS pur, puis
d'appliquer .filter(':hidden').
Le suivi de la visibilité des éléments à l'aide d'autres
méthodes, par exemple avec une classe, peut
offrir de meilleures performances.
Syntaxe
Voici comment nous sélectionnons les éléments cachés :
$(':hidden');
Exemple
Au clic sur le bouton #test,
affichons les carrés invisibles :
<button id="test">show</button>
<div></div>
<div style="display:none;"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
div {
width: 40px;
height: 40px;
margin: 5px;
border: 2px outset green;
float: left;
}
$('#test').click(function() {
$('div:hidden').show('slow');
});
