:hidden 選擇器

分類： 選擇器 > 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 可見性不會被考慮（因此 $( elem ).css( "visibility", "hidden" ).is( ":hidden" ) == false）。發布說明 中更詳細地說明了這些變更。

jQuery 3 略微修改了 :hidden（以及 :visible）的意義。從這個版本開始，如果元素沒有任何版面框，則會被視為 :hidden。例如，br 元素和沒有內容的內嵌元素不會被 :hidden 選擇器選取。

其他注意事項

  • 由於 :hidden 是 jQuery 擴充功能，不屬於 CSS 規格的一部分，因此使用 :hidden 的查詢無法利用原生 DOM querySelectorAll() 方法提供的效能提升。要使用 :hidden 選取元素時達到最佳效能，請先使用純 CSS 選擇器選取元素，然後使用 .filter(":hidden")。
  • 大量使用這個選擇器可能會影響效能，因為它可能會強制瀏覽器在判斷可見性之前重新渲染頁面。透過其他方法追蹤元素的可見性，例如使用類別，可以提供更好的效能。

範例

顯示所有隱藏的 div 並計算隱藏的輸入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
<!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>

示範