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