如何在 jQuery 中檢查元素是否被隱藏

Sundeep Dawadi 2023年1月30日 2020年9月26日
  1. 用 jQuery 檢查元素是否被隱藏的方法
  2. 瞭解 jQuery 中的:hidden 選擇器
  3. 快速檢查元素是否隱藏的技巧
如何在 jQuery 中檢查元素是否被隱藏

任何 DOM 中的物件都可以通過將其 CSS 屬性 display 指定為 none 來隱藏。

用 jQuery 檢查元素是否被隱藏的方法

首先,我們建立一個標題元素 <h1>,並應用內聯 CSS 屬性來隱藏它。

<h1 style="display:none;">Your text here</h1>

在 jQuery 中,有兩個可見性過濾器 - :hidden:visible 選擇器。它們分別指定元素是否隱藏和可見。可以通過下面的方法輕鬆檢查。

<script>
$(document).ready(function(){
//checks if document is ready
 if($("h1").is(":hidden")){
  alert("The heading is hidden.");
  //your function here
 } 
if($("h1").is(":visible"){
  alert("The heading  is visible.");
 }
});
</script>

它給出了一個警告說: The heading is hidden.

注意
如果你放置了多個元素,其中一個是隱藏的,另一個是可見的,它同時觸發 is(":visible")is(":hidden")

瞭解 jQuery 中的:hidden 選擇器

:hidden 選擇器基於以下原因將一個元素標識為隱藏。

  1. 它的 CSS display 屬性的值為 none
  2. 該元素是一個帶有 type="hidden"的表單元素。
  3. 該元素的 heightwidth 值顯示設定為 0。
  4. 父元素是隱藏的。

所以,CSS visibility 屬性設定為 hiddenopacity 屬性設定為 0 的元素,在 jQuery 中被認為是可見的,因為它們仍然佔用 DOM 中的空間。

另外,如果要檢查元素的具體 CSS 屬性是否被隱藏,我們可以使用以下方法。

<script>
if ( $(h1).css('display') == 'none' || $(h1).css('opacity') == '0'){
alert("The heading is hidden.");
//your function here
}
</script>

快速檢查元素是否隱藏的技巧

jQuery 不能利用原生 DOM 的 querySelectorAll() 方法。它還會產生一些效能問題,因為它迫使瀏覽器重新渲染頁面以確定可見性。所以與其使用元素,不如使用類或 CSS 選擇器,然後使用 .find(":hidden")

<h1 style="display:none;">Your text here</h1>
<script>
 $(document).ready(function(){
  var hiddenHeadings = $("body").find(":hidden").is("h1");
   if(hiddenHeadings.length > 0){
    alert("There is atleast one heading hidden.");
   }
 });
</script>

在這裡可以直接訪問 hiddenHeadings,並可以對其進行操作。