小粋空間  -  a cheap joke and a play on words site

jQueryで要素の表示・非表示を判定する方法

jQueryの要素の表示・非表示を判定する方法を紹介します。

１．基本

jQueryでは、要素の表示・非表示のためのメソッドとして、show()とhide()が提供されています。

show()は指定した要素を表示します。

$('#foo').show();

hide()は指定した要素を非表示にします。

$('#foo').hide();

が、表示・非表示を判定する方法として、isShow()やisHide()、isVisible()などは提供されていません。

２．css('display')で判定する

show()はdisplayプロパティ「block」、hide()はdisplayプロパティを「none」にするので、これを判定に利用します。

if ($('#foo').css('display') == 'block') {
    // 表示されている場合の処理
} else {
    // 非表示の場合の処理
}

３．is(':visible')で判定する

「:visible」は表示されている要素を抽出するためのもので、これとis()を組み合わせて利用します。

if ($('#foo').is(':visible')) {
    // 表示されている場合の処理
} else {
    // 非表示の場合の処理
}

４．is(':hidden')で判定する

「:hidden」は「:visible」と逆に、表示されていない要素を抽出するためのもので、これとis()を組み合わせて利用します。

if ($('#foo').is(':hidden')) {
    // 非表示の場合の処理
} else {
    // 表示されている場合の処理
}

５．プラグインを利用する

次のプラグインをコード内に記述しておけば、上記の方法よりパフォーマンスが向上するようです。

$.fn.isVisible = function() {
    return $.expr.filters.visible(this[0]);
};

プラグインは次のように利用します。

if ($('#foo').isVisible()) {
    // 表示されている場合の処理
} else {
    // 非表示の場合の処理
}

このプラグインは下記に掲載されているものです。

jQuery visibility test