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

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

Posted at August 3,2012 1:23 AM
Tag:[jQuery]

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

1.基本

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

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

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

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

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

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

2.css('display')で判定する

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

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

3.is(':visible')で判定する

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

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

4.is(':hidden')で判定する

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

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

5.プラグインを利用する

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

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

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

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

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

jQuery visibility test
関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)