visible selector

The :visible selector selects all visible elements on the page. Elements with visibility: hidden or with opacity: 0 are considered visible because they take up space in the layout. Elements are considered visible if they take up space in the document. Visible elements have a height and width different from 0. Since :visible is not a CSS spec, for better performance in modern browsers it is better to first filter out elements using a pure CSS selector and then apply .filter(':visible'). Tracking element visibility using other methods, such as a class, may provide better performance.

Syntax

This is how we select visible elements:

javascript$(':visible');

Example

Let's show invisible squares by clicking on the button. When you click on "visible" squares, their background will change to yellow:

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

See also