Selector visible

El selector :visible selecciona todos los elementos visibles en la página. Los elementos con visibility: hidden o con opacity: 0 se consideran visibles, ya que ocupan espacio en el diseño. Los elementos se consideran visibles si ocupan espacio en el documento. Los elementos visibles tienen altura y anchura distintas a 0. Dado que :visible no pertenece a la especificación CSS, para mejorar el rendimiento en los navegadores modernos es mejor filtrar primero los elementos con un selector css puro, y luego aplicar .filter(':visible'). El seguimiento de la visibilidad de los elementos mediante otros métodos, por ejemplo, mediante una clase, puede proporcionar un mejor rendimiento.

Sintaxis

Así seleccionamos los elementos visibles:

javascript$(':visible');

Ejemplo

Vamos a mostrar los cuadrados invisibles al hacer clic en el botón. Al hacer clic en los cuadrados "visibles", su fondo cambiará a amarillo:

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

Véase también