要素が jQuery で非表示になっているかどうかを確認する方法

1. jQuery で要素が隠されているかどうかを調べる方法
2. jQuery の:hidden セレクタを理解する
3. 要素が隠されているかどうかをチェックするためのクイックヒント

DOM 内の任意のオブジェクトは、CSS プロパティの display を none に代入することで非表示にすることができます。

jQuery で要素が隠されているかどうかを調べる方法

まず、見出し要素 <h1> を作成し、インライン CSS プロパティを適用して非表示にします。

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

jQuery には、:hidden と:visible という 2つの可視性フィルタがあります。これらはそれぞれ要素を非表示にするかどうかを指定します。これは以下のメソッドで簡単に確認することができます。

<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. という警告が表示されます。

jQuery の:hidden セレクタを理解する

セレクタ :hidden は、以下の理由で要素を非表示にします。

1. CSS の display プロパティの値が none です。
2. 要素が type="hidden" を持つフォーム要素です。
3. 要素の height と width の値は明示的に 0 に設定されます。
4. 親要素は非表示です。

つまり、CSS の visibility プロパティが hidden に設定されている要素、または opacity プロパティが 0 に設定されている要素は、DOM 内のスペースを消費しているため、jQuery では表示されているとみなされます。

別の方法として、要素の特定の 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 に直接アクセスして操作することができます。