JavaScriptプログラムに関する各種メモ書き

jQueryでオブジェクト(HTMLタグ要素)の存在、表示、アニメーション中を判別する

jQueryでオブジェクト(HTMLタグ要素)の存在を判別するには <b>.length</b>や <b>.is()メソッド</b> を使用します。

●<div id="hoge">が<b>『存在するかどうか?』</b>を調べるには

if($('#hoge').length) {
    alert('存在します');
}

とします。

●<div id="hoge">が<b>『表示中か非表示か?』</b>を調べるには

// 方法1. 「透明度」と「visibility」両方を確認する(おすすめ)
  if ($('#hoge').css('opacity') > 0 && $('#hoge').filter(':not(:hidden)').length ){
    alert('表示中です');
}
// 方法2. 「visibility」のみ確認する
if( $('#hoge').filter(':not(:hidden)').length ){
    alert('表示中です');
}
// 方法3. 「visibility」のみ確認する
if ( $('#hoge').is(':visible') ){
    alert('表示中です');
}

●<div id="hoge">が<b>『CSS3アニメーション中かどうか?』</b>を調べるには

    console.log( $('#hoge').css("transform") );
    console.log( $('#hoge').css("transition") );
    console.log( $('#hoge').css("opacity") );

など、CSSのプロパティを取得してきて変化中の値を見るといいでしょう。

●<div id="hoge">が<b>『JavaScript(jQuery)アニメーション中かどうか?』</b>を調べるには

// 方法1.
if ( $("#hoge:animated").length ){
	alert('アニメーション中です');
}
// 方法2.
if ( $("#hoge").is(":animated") ){
	alert('アニメーション中です');
}

.is() メソッドを覚えておくと色々便利です。

上記の例以外にも

// 要素にフォーカスがあたっているなら
if ($("#hoge").is(":focus") ){
    alert('フォーカスしています');
}

// 要素が最後の要素であれば
if ( $(".fuga").is(":last-child") ){
    alert('最後の要素です');
}

// 要素が表示中なら
if( $("#hoge").is(":visible") ){
    alert('表示中です');
} 

// 要素が非表示なら
if ( $("#hoge").is(":hidden") ){
    alert('非表示です');
}

// 要素がfugaクラスを内包しているなら
if ( $("#hoge").is(":has('.fuga')") ){
    alert('.fugaクラスを内包しています');
}
 

関連エントリー

No.829
06/05 15:17

edit

jQuery