jQuery селектор :visible

Определение и применение

jQuery селектор :visible выбирает все элементы, которые видимы (занимают место в документе). В jQuery 3 достаточно наличия области раскладки, даже с нулевой шириной и высотой.

Обращаю Ваше внимание на то, что этот селектор выбирает следующие элементы, так как они все еще занимают место в макете страницы:

• Элементы у которых установлено значение hidden у CSS свойства visibility (определяет, является ли элемент видимым).
• Элементы у которых установлено значение 0 у CSS свойства opacity (прозрачность).

Под скрытыми элементами подразумевается:

• Элементы у которых установлено значение none у CSS свойства display.
• Элементы формы, для которых установлено значение "hidden" в атрибуте type.
• Элемент не создаёт ни одной области раскладки. В jQuery 3 нулевая ширина и высота сами по себе не означают, что элемент скрыт: например, <br> и пустой строчный элемент могут соответствовать :visible.
• Родительский элемент скрыт, в этом случае дочерние элементы также не отображаются.

Селектор :visible является противоположностью селектора :hidden (каждый элемент, который был выбран одним селектором не будет выбран другим и наоборот).

jQuery синтаксис:

$(":visible")

Добавлен в версии jQuery

Селектор в CSS

Пример использования

<button>Клик</button>
<div style="width: 50px; height: 50px; margin: 5px; background: plum; opacity: 0"></div>
<div style="width: 50px; height: 50px; margin: 5px; background: plum; display: none"></div>
<div style="width: 50px; height: 50px; margin: 5px; background: plum"></div>
<div style="width: 50px; height: 50px; margin: 5px; background: plum; display: none"></div>
<div style="width: 50px; height: 50px; margin: 5px; background: plum; visibility: hidden"></div>

$(document).ready(function () {
    $('button').click(function () {
        $('div:visible').css({
            border: '1px solid #000',
            visibility: 'visible',
            opacity: '1',
        })
    })
})

В этом примере при нажатии на кнопку мы запускаем функцию, которая с использованием селектора :visible выбирает все видимые (занимают место в документе) элементы <div> и стилизует их.