【jQuery】:visibleで表示されている要素を指定する!

jQueryで表示されている要素を指定するには:visibleを使用します。

:visibleとは表示状態の要素を指定する擬似クラスであり、画面上に表示されている要素を指定することができることから、displayプロパティが「none」になっていない要素を指定することができます。

また、画面上に表示されている要素を表示や非表示で設定するにはdisplayプロパティ以外にもvisibilityプロパティや、opacityプロパティが挙げられますが、それらは要素はあるけど見えない状態になる為、:visibleで取得できちゃいますので間違えないようにしましょう。

したがって、:visibleは可視状態になっている要素を指定するようになります。

今回は、:visibleを使ってjQueryで表示されている要素を指定する方法について以下の内容で解説していきます。

⚫︎ displayプロパティで表示されている要素を指定する場合
⚫︎ visiblityプロパティで表示されている要素を指定する場合
⚫︎ opacityプロパティで表示されている要素を指定する場合

⚫︎ jQueryを使用せずに表示されている要素を指定する場合

ハルトさん

今回は:visibleを使ってjQueryで表示されている要素を指定する方法について説明していきます。

さとみさん

はい!
お願いします!

:visibleとは

:visibleとは表示されている要素を指定する擬似クラスとなります。
:visibleはdisplayプロパティが「none」以外の状態である要素を指定することができます。

:visibleの書き方

:visibleの書き方は下記となります。

$の()にセレクタ:visibleを指定することで、表示されている要素を指定することができます。

表示されている要素を指定するサンプルコード

:visibleで表示されている要素を指定するサンプルコードを紹介します。

displayプロパティで表示されている要素を指定する場合

displayプロパティで表示されている要素を指定する場合をみてみます。

sample.html

index.js

出力結果

displayプロパティで表示されている要素を指定すると、displayプロパティが「none」の場合はvisibleでは取得できません。
その為、ボタンを押すとブロック要素Aとインライン要素Bの要素のみアラートで表示されています。

visiblityプロパティで表示されている要素を指定する場合

visiblityプロパティで表示されている要素を指定する場合を見てみます。

sample.html

index.js

出力結果

visibilityプロパティで表示されている要素を指定すると、visibilityプロパティが「hidden」の場合でもvisibleで取得しています。
その為、ボタンを押すとブロック要素Aとブロック要素B、インライン要素Aとインライン要素Bの要素がアラートで表示されています。

さとみさん

visibilityプロパティで設定されている要素では値がhiddenの場合でもvisibleで取得できるのですね!

ハルトさん

そうですね。
visibilityプロパティにhiddenを設定しても要素はあるけど見えない状態になるので:visibleで取得できてしまいます。

opacityプロパティで表示されている要素を指定する場合

opacityプロパティで表示されている要素を指定する場合を見てみます。

sample.html

index.js

出力結果

opacityプロパティで表示されている要素を指定すると、opacityプロパティが「0」の場合でもvisibleで取得しています。
その為、ボタンを押すとブロック要素Aとブロック要素B、インライン要素Aとインライン要素Bの要素がアラートで表示されています。

さとみさん

opacityプロパティで設定されている要素では値が0の場合でもvisibleで取得できるのですね!

ハルトさん

そうですね。
opacityプロパティに0を設定してもvisibilityプロパティ同様に要素はあるけど見えない状態になるので:visibleで取得できてしまいます。

jQueryを使用せずに表示されている要素を指定する場合

jQueryを使用せず純粋なJavaScriptでに表示されている要素を指定してみます。

sample.html

index.js

出力結果

表示されている要素に枠線が追加されたことから純粋なJavaScriptでに表示されている要素を指定しています。

さとみさん

jQueryを使わず同じことを実行させようとすると、とてもコードが長くなるんですね!
これだとjQueryの方がとても便利です!

ハルトさん

そうですよね。
コードの量や分かりやすさを比較するとあきらかにjQueryの方が良いですよね。

今回のポイント

:visibleで表示されている要素を指定

⚫︎ jQueryで表示されている要素を指定するには:visibleの擬似クラスを使用する

⚫︎ :visibleを使用するには「$(セレクタ:visible)」で指定する

⚫︎ :visibleはdisplayプロパティで「none」に設定されている要素は取得できない

⚫︎ :visibleはvisiblityプロパティやopacityプロパティで要素が見えない状態にしても取得することができる

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し