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