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 :

javascript$(':hidden');

Exemple

Au clic sur le bouton #test, affichons les carrés invisibles :

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

Voir aussi