Visible-selektorn
Selektorn :visible väljer alla synliga
element på sidan.
Element med visibility: hidden eller med
opacity: 0 anses vara synliga eftersom de upptar
plats i layouten.
Element anses vara synliga om de upptar
plats i dokumentet. Synliga element har en höjd
och bredd som skiljer sig från 0.
Eftersom :visible inte tillhör CSS-specifikationen,
är det för bättre prestanda i moderna
webbläsare bäst att först filtrera element med
ren CSS-selektor, och sedan
tillämpa .filter(':visible').
Spårning av elementens synlighet med andra
metoder, till exempel med en klass, kan
ge bättre prestanda.
Syntax
Så här väljer vi synliga element:
$(':visible');
Exempel
Låt oss visa de osynliga kvadraterna när man klickar på knappen. När man klickar på de "synliga" kvadraterna kommer deras bakgrund att ändras till gul:
<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');
});
