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

Глядзіце таксама