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:

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

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

Se även