裏紙に書く程度の内容

jQuery 要素の存在チェック方法

目次はこちら > jQueryを使う際の25個Tipsを確認してみる

要素の存在有無を確かめる

についてです。

jQueryで要素の存在チェックをする方法

jQueryで要素の存在有無を調べる方法はいくつかありますが、元記事では.lengthを使う方法が紹介されています。

それ以外では.get(0),.size(),.is()と、[0](0番目要素を取得して調べる)等があります。

コードで見ると以下のようなパターン。

if ($('#id').length) {
}
if ($('#id').get(0)) {
}
if ($('#id').size()) {
}
if ($('#id').is()) {
}
if ($('#id')[0]) {
}

.length

.lengthはオブジェクトの要素数を返します。この値が0ならば指定要素が存在しないことになります。

if(0) {}はブロックに入らないのでこれで判定というわけですね。

.get(0)

.get(index)は指定したindexの要素の参照を返します。要素が存在しないとundefinedを返すので要素有無の判別に利用できます。

.size()

.size()lenghtを同じものを返します。

.is('*')

.is(expr)は、1つでも条件式(expr)と一致する要素があればtrueを返します。

[0]

$(selector)[0]$(selector).get(0)と同じです。

文脈的には.is()が一番わかりやすいようにも思えますが、実際にこれが使われているソースはあまり見かけない気がします。

どの方法で確認するのがベターなのか調べてみましょう。

パフォーマンスを調べてみる

というわけで、判断基準となるパフォーマンス。
同一htmlで上記パターンの存在有無確認処理を各々5,000回実行させて、その処理時間を計測してみます。

結果はこちら。

コード 処理時間
.length 約20ms
.get(0) 約21ms
.size() 約20ms
.is('*') 約42ms
[0] 約20ms

.is('*')以外は実行速度にほとんど差がありません。.is()に関しても倍とはいえ5,000回の試行で20ms程度の差ならば微々たるものと考えることもできます。

(実際問題として、要素の確認をループで数千回も回すようなことはありえないと思います。というか、あったらプログラムの構成としてアカンのではないでしょうか。)

パフォーマンス的にはぶっちゃけどれ使ってもOKといっても問題ないでしょう。

じゃあどれがいいのさ?

どれにするかはもはや好みになりますが、自分なら.lengthを使います。
こいつだけ”カッコ”が必要ない。

JSは括弧の嵐になることが多々あるので、括弧が減ると可読性が増す気がするんですよね・・・。気がするだけかもしれませんが。

結論

要素の存在有無を確かめるには$(selector).lengthで!

ちなみに

速度のことを言うならjQuery使わずに、

if (document.getElementById('selector')) {
}

としたほうがはるかに速いです。(IDが付与されている場合に限りますが。)
ただ、今回はあくまでjQueryのTipsなのでこれは除外させていただきました。

Index