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

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

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

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

注意: ある要素を非表示、別の要素を表示にして複数の要素を配置した場合、is(":visible")is(":hidden") の両方がトリガされます。

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

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

  1. CSS の display プロパティの値が none である。
  2. 要素が type="hidden" を持つフォーム要素である。
  3. 要素の heightwidth の値は明示的に 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 に直接アクセスして操作することができます。

comments powered by Disqus