Селектор visible

Селектор :visible выбирает все видимые элементы на странице. Элементы с visibility: hidden или с opacity: 0 считаются видимыми, поскольку занимают место в макете. Элементы считаются видимыми, если они занимают место в документе. Видимые элементы имеют высоту и ширину отличные от 0. Так как :visible не относится к CSS спецификации, то для улучшения производительности в современных браузерах лучше в начале отфильтровать элементы с использованием чистого css-селектора, а затем применить .filter(':visible'). Отслеживание видимости элементов с помощью других методов, например, с помощью класса, может обеспечить лучшую производительность.

Синтаксис

Так мы выбираем видимые элементы:

javascript$(':visible');

Пример

Давайте по клику на кнопку покажем невидимые квадратики. При нажатии на "видимые" квадратики их фон будет меняться на желтый:

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

Смотрите также