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



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

1.$(selector)[0]

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

[javascript title=”サンプル”] $(function(){
if ($(‘hoge’)[0]) {
alert(‘found’);
} else {
alert(‘not found’);
}
})(jquery);
[/javascript]

2.$(selector).get(0)

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

[javascript title=”サンプル”] $(function(){
if (jQuery(‘hoge’).get(0)) {
alert(‘found’);
} else {
alert(‘not found’);
}
})(jquery);
[/javascript]

3.$(selector).length

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

[javascript title=”サンプル”] $(function(){
if ($(‘hoge’).length) {
alert(‘found’);
} else {
alert(‘not found’);
}
})(jquery);
[/javascript]

4.$(selector).size()

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

[javascript title=”サンプル”] $(function(){

if ($("#hoge").size() > 0)) {
alert(‘found’);
} else {
alert(‘not found’);
}
})(jquery);
[/javascript]

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

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

[javascript title=”サンプル”] $(function(){
if ($(‘hoge’).is(‘*’)) {
alert(‘found’);
} else {
alert(‘not found’);
}
})(jquery);
[/javascript]

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

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

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

[javascript title=”サンプル”] if($("#hoge").size()===0){
//$("#hoge")が存在しないときの処理
}
[/javascript]

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




ABOUTこの記事をかいた人

Web Developer & Web Designer at Yahoo! Japan. Like HTML, css, JavaScript, Apple, ra-men, Angular, b-monster.