A visible selector

A :visible selector kiválasztja az összes látható elemet az oldalon. A visibility: hidden vagy opacity: 0 tulajdonsággal rendelkező elemek láthatónak számítanak, mivel helyet foglalnak a elrendezésben. Az elemek akkor számítanak láthatónak, ha helyet foglalnak a dokumentumban. A látható elemek magassága és szélessége különbözik 0-tól. Mivel a :visible nem része a CSS specifikációnak, ezért a modern böngészőkben a jobb teljesítmény érdekében először tiszt CSS selectorral érdemes szűrni az elemeket, majd alkalmazni a .filter(':visible') metódust. Az elemek láthatóságának nyomon követése más módszerekkel, például egy osztállyal, jobb teljesítményt biztosíthat.

Szintaxis

Így választjuk ki a látható elemeket:

javascript$(':visible');

Példa

A gombra kattintva jelenítsük meg a láthatatlan négyzeteket. A "látható" négyzetekre kattintva a hátterük sárgára változik:

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

Lásd még