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:

javascript$(':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:

html<button id="show">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$('div:visible').click(function() {
  $(this).css('background', 'yellow');
});

$('#show').click(function() {
  $('div:hidden').show('slow');
});

Vezi și