:visible selector — jQuery

Селектор :visible

Описание: Выбирает все видимые элементы.

версия добавлена: 1.0jQuery( ":visible" )

Элементы считаются видимыми, если они занимают место в документе. Видимые элементы имеют ширину или высоту, большую нуля.

Элементы с visibility: hidden или opacity: 0 считаются видимыми, так как они всё ещё занимают место в макете.

Элементы, которые не находятся в документе, считаются скрытыми; jQuery не имеет способа узнать, будут ли они видимыми при добавлении в документ, так как это зависит от применяемых стилей.

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

Все option элементы считаются скрытыми, независимо от их состояния selected.

Во время анимаций, скрывающих элемент, элемент считается видимым до окончания анимации. Во время анимаций отображения элемента, элемент считается видимым в начале анимации.

Способ вычисления :visible был изменён в jQuery 1.3.2. В примечаниях к выпуску изменения описаны более подробно.

jQuery 3 немного изменяет значение :visible (и, следовательно, :hidden). Начиная с этой версии, элементы будут считаться видимыми, если у них есть какие-либо блоки макета, включая те, у которых ширина и/или высота равны нулю. Например, элементы br и инлайновые элементы без содержимого будут выбраны селектором :visible.

Дополнительные замечания:

Поскольку :visible является расширением jQuery и не входит в спецификацию CSS, запросы, использующие :visible не могут воспользоваться преимуществами повышения производительности, предоставляемого методом querySelectorAll() DOM. Для достижения наилучшей производительности при использовании :visible для выбора элементов, сначала выберите элементы с помощью чистого CSS-селектора, а затем используйте .filter(":visible").
Использование этого селектора может иметь последствия для производительности, так как это может заставить браузер перерисовать страницу перед определением видимости. Отслеживание видимости элементов другими методами, например, с помощью класса, может обеспечить лучшую производительность.

Пример:

Сделайте все видимые блоки div жёлтыми при нажатии.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>visible demo</title>
  <style>
  div {
    width: 50px;
    height: 40px;
    margin: 5px;
    border: 3px outset green;
    float: left;
  }
  .starthidden {
    display: none;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<button>Show hidden to see they don't change</button>
<div></div>
<div class="starthidden"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
 
<script>
$( "div:visible" ).on( "click", function() {
  $( this ).css( "background", "yellow" );
} );
$( "button" ).on( "click", function() {
  $( "div:hidden" ).show( "fast" );
} );
</script>
 
</body>
</html>

:visible Селектор

Селектор :visible

версия добавлена: 1.0jQuery( ":visible" )

Дополнительные замечания:

Пример:

Демо: