Sélecteur visible
Le sélecteur :visible sélectionne tous les éléments
visibles sur la page.
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 sont considérés comme visibles s'ils occupent
de l'espace dans le document. Les éléments visibles ont une hauteur
et une largeur différentes de 0.
Étant donné que :visible ne fait pas partie de 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(':visible').
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
C'est ainsi que nous sélectionnons les éléments visibles :
$(':visible');
Exemple
Au clic sur un bouton, affichons les carrés invisibles. Lorsqu'on clique sur les carrés "visibles", leur fond deviendra jaune :
<button id="show">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;
}
$('div:visible').click(function() {
$(this).css('background', 'yellow');
});
$('#show').click(function() {
$('div:hidden').show('slow');
});
