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