如何在 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,并可以对其进行操作。