jQuery で表示されている場合どうすればいいですか？
Webサイトやウェブアプリケーション開発において、要素が表示されているかどうかをJavaScriptで判定することはよくある要件です。例えば、特定の要素が表示されたタイミングでアニメーションを実行したり、要素の表示状態によって異なる処理を行いたい場合などが考えられます。
jQueryは、JavaScriptの複雑な処理をシンプルに記述できるライブラリとして人気ですが、要素の表示判定も簡単に実現できます。この記事では、jQueryを用いて要素が表示されているかどうかを判定する方法について解説します。
:visible セレクタ と is(':visible')
jQueryで要素が表示されているかどうかを確認するには、主に以下の2つの方法があります。
| 方法 | 説明 |
|---|---|
:visible セレクタ |
表示されている要素のみを含むjQueryオブジェクトを返す |
is(':visible') |
要素が表示されているかどうかをboolean値で返す |
:visible セレクタ
:visible セレクタは、表示されている要素のみを選択します。このセレクタは、要素のCSSの display プロパティが none ではない、かつ visibility プロパティが hidden ではない要素を選択します。
<div id="target-element" style="display: none;">表示/非表示を切り替える要素</div>
<script>
$(function() {
// 非表示なので要素は取得できない
const $hiddenElement = $('#target-element:visible');
console.log($hiddenElement.length); // 0
});
</script>
is(':visible') メソッド
is(':visible') メソッドは、指定した要素が表示されている場合は true を、そうでない場合は false を返します。
<div id="target-element">表示/非表示を切り替える要素</div>
<script>
$(function() {
const isVisible = $('#target-element').is(':visible');
console.log(isVisible); // true
});
</script>
どちらの方法を使うべきか？
どちらの方法も要素の表示状態を確認できますが、用途によって使い分けることが重要です。
* **要素を取得して、表示されている場合のみ操作する** 場合は、:visible セレクタを使用します。
* **要素の表示状態によって条件分岐などを行う** 場合は、 is(':visible') メソッドを使用します。
注意点
* 要素の親要素が非表示の場合は、子要素は表示されていても:visible セレクタでは選択されず、 is(':visible') メソッドは false を返します。
* opacity: 0 や visibility: hidden の要素は、画面上には表示されていませんが、 :visible セレクタでは選択され、 is(':visible') メソッドは true を返します。
参考資料
* jQuery API ドキュメント :visible セレクタ * jQuery API ドキュメント is() メソッドよくある質問
Q1. 親要素が非表示の場合、子要素の表示状態はどう判定されますか？
A1. 親要素が非表示の場合、子要素はたとえCSSで表示状態が設定されていても、非表示と判定されます。
Q2. opacity: 0 の要素は表示されていると判定されますか？
A2. はい、opacity: 0 の要素は、画面上には表示されていませんが、:visible セレクタでは選択され、is(':visible') メソッドは true を返します。これは、要素自体が技術的には表示されている状態であるためです。
Q3. visibility: hidden の要素は表示されていると判定されますか？
A3. はい、visibility: hidden の要素も、画面上には表示されていませんが、:visible セレクタでは選択され、is(':visible') メソッドは true を返します。これは、要素自体が技術的には表示されている状態であるためです。もし、visibility: hidden の要素を非表示と判定したい場合は、別の方法を検討する必要があります。
その他の参考記事:jquery dropdownplain