Selectorul visible
Selectorul :visible selectează toate elementele vizibile
de pe pagină.
Elementele cu visibility: hidden sau cu
opacity: 0 sunt considerate vizibile, deoarece ocupă
spațiu în layout.
Elementele sunt considerate vizibile dacă ocupă
spațiu în document. Elementele vizibile au înălțimea
și lățimea diferite de 0.
Deoarece :visible nu face parte din specificația CSS,
pentru a îmbunătăți performanța în browserele moderne
este mai bine să filtrați mai întâi elementele cu
utilizarea unui selector css pur, iar apoi
să aplicați .filter(':visible').
Urmărirea vizibilității elementelor cu ajutorul altor
metode, de exemplu, cu ajutorul unei clase, poate
oferi o performanță mai bună.
Sintaxă
Așa selectăm elementele vizibile:
$(':visible');
Exemplu
La click pe buton să afișăm pătratele invizibile. La apăsarea pe pătratele "vizibile" fundalul lor se va schimba în galben:
<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');
});
