Селектор visible - выбор видимых элементов
Селектор :visible выбирает все видимые
элементы на странице.
Элементы с visibility: hidden или с
opacity: 0 считаются видимыми, поскольку занимают
место в макете.
Элементы считаются видимыми, если они занимают
место в документе. Видимые элементы имеют высоту
и ширину отличные от 0.
Так как :visible не относится к CSS спецификации,
то для улучшения производительности в современных
браузерах лучше в начале отфильтровать элементы с
использованием чистого css-селектора, а затем
применить .filter(':visible').
Отслеживание видимости элементов с помощью других
методов, например, с помощью класса, может
обеспечить лучшую производительность.
Синтаксис
Так мы выбираем видимые элементы:
$(':visible');
Пример
Давайте по клику на кнопку покажем невидимые квадратики. При нажатии на "видимые" квадратики их фон будет меняться на желтый:
<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');
});