【jQuery】今見えているかどうか、表示しているかどうかを取得する

Tweet

Category JavaScript / Tagged jQuery 2012/04/11

画面上の要素を表示したり非表示にしたりすることがあるけど、今表示しているかどうかが取得できる方法です。

今非表示のものにマッチするセレクタがあります。

:hidden

jQueryで、セレクタにマッチする要素があるかどうかを判定してくれるのは .is() 。

以下のようにすると、#targetが非表示ならばtrueが返ってきます。

$("#target").is(":hidden")

if ($("#target").is(":hidden")) {
    //非表示のときの処理をする
} else {
    //表示しているときの処理をする
}

:hidden はdocument内で高さ、幅を持ってスペースを占めているかどうかで判断されるとのこと。

visibility:hidden は見えなくても幅高さはあり、対象外。

その要素の親要素が非表示の場合は、対象となる。

DEMO

jQueryで今見えているかどうかを取得する – デモ

なお、 .is() は複数の要素に対しては最低1つ条件にマッチすればtrueを返すので、ご注意を。