Селектор 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');
});

Вижте също