jqueryで要素の存在を確認する方法

jqueryである要素があった場合に実行したいという時もあると思います。 jqeuryではいくつかその方法があるので、まとめてみました。

1.$(selector)[0]

$(selector)はオブジェクトを配列の様に扱えるので、0番目の要素をチェックすれば、存在のチェックをできます。

$(function(){
if ($('hoge')[0]) {
alert('found');
} else {
alert('not found');
}
})(jquery);

2.$(selector).get(0)

get()は、パラメータで指定したjQueryオブジェクトに格納されているDOMを取得出来るメソッドです。
パラメータに[0]を指定すれば存在のチェックをすることができます。

$(function(){
if (jQuery('hoge').get(0)) {
alert('found');
} else {
alert('not found');
}
})(jquery);

3.$(selector).length

lenghtは、jQueryオブジェクトのインデックス数を保持しているので、存在のチェックをすることができます。

$(function(){
if ($('hoge').length) {
alert('found');
} else {
alert('not found');
}
})(jquery);

4.$(selector).size()

size()はjQueryオブジェクトのインデックス数を返却するメソッドです。インデックス数が「0」の場合は要素が存在しないと判断できます。 これを少し変えれば存在をがない場合も書くことができます。

$(function(){

if ($("#hoge").size() > 0)) {
alert('found');
} else {
alert('not found');
}
})(jquery);

5.$(selector).is(‘*’)

is()は、要素集合のうち、1つでも条件式に合致する要素があればtrueを返すメソッドです。ワイルドカードの「*」を設定することで、指定要素の存在のチェックをすることができます。

$(function(){
if ($('hoge').is('*')) {
alert('found');
} else {
alert('not found');
}
})(jquery);

色々あるのですが、basara669は「$(selector).size()>0」を使ってます。
なんとなくですがw

おまけ:存在しないというのを確認する方法

jqueryを使って、ある要素が存在しないということを確認することも書いておきたいと思います。

if($("#hoge").size()===0){
  //$("#hoge")が存在しないときの処理
}

速度的にはどれが早いんでしょうね〜。。 その辺りも検証できたらな〜。。
ではでは

お問い合わせ

お仕事の依頼や何か質問などあれば、こちらからお願いします〜。

Not readable? Change text.

Start typing and press Enter to search