:hidden selector — jQuery

селектор :hidden

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

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

Элементы могут считаться скрытыми по нескольким причинам:

У них есть значение CSS display none.
Это элементы формы с type="hidden".
Их ширина и высота явно установлены в 0.
Родительский элемент скрыт, поэтому элемент не отображается на странице.

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

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

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

Во время анимаций показа элемента, элемент считается видимым в начале анимации.

Как определяется :hidden , было изменено в jQuery 1.3.2. Элемент считается скрытым, если он или любой из его родителей не занимает места в документе. CSS свойство visibility не учитывается (поэтому $( elem ).css( "visibility", "hidden" ).is( ":hidden" ) == false). В примечаниях к выпуску содержатся более подробные сведения об изменениях.

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

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

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

Пример:

Отображает все скрытые блоки div и подсчитывает скрытые поля ввода.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hidden demo</title>
  <style>
  div {
    width: 70px;
    height: 40px;
    background: #e7f;
    margin: 5px;
    float: left;
  }
  span {
    display: block;
    clear: left;
    color: red;
  }
  .starthidden {
    display: none;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<span></span>
<div></div>
<div style="display:none;">Hider!</div>
<div></div>
 
<div class="starthidden">Hider!</div>
<div></div>
 
<form>
  <input type="hidden">
  <input type="hidden">
  <input type="hidden">
</form>
 
<span></span>
 
<script>
// In some browsers :hidden includes head, title, script, etc...
var hiddenElements = $( "body" ).find( ":hidden" ).not( "script" );
 
$( "span" ).first().text( "Found " + hiddenElements.length + " hidden elements total." );
$( "div:hidden" ).show( 3000 );
$( "span" ).last().text( "Found " + $( "input:hidden" ).length + " hidden inputs." );
</script>
 
</body>
</html>

:hidden Селектор

селектор :hidden

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

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

Пример:

Демо: