サイトアイコン IT NEWS

jQueryで要素の存在を確認する5つの方法

jquery-check-selector

jQueryHTML要素があるかないかを判定する場合、様々な方法があり選ぶ理由も人それぞれで、どれを使ったらいいのか迷っている方のために、書き方処理速度パフォーマンス)を比較しているサイトをまとめましたので、選定する基準として参考になればと思います。

要素の存在を確認する

要素存在を調べるには、以下の5つ書き方があります。

5つの書き方

[0]get(0)size()lengthはほぼ一緒です。

($("selector")[0]) ? true : false;
($("selector").get(0)) ? true : false;
($("selector").size()) ? true : false;
($("selector").length) ? true : false;
($("selector").is()) ? true : false;

処理速度(パフォーマンス)

FirefoxFirebugというプラグインを使って計測した結果が紹介されてます。

コード速度
document.getElementById("id") != null0.019ms
$("selector")[0]0.033ms
$("selector").get(0)0.040ms
$("selector").size()0.041ms
$("selector").length0.069ms
$("selector").is("*")0.169ms
引用:[JS][jQuery] 要素の存在を確認する6通りのコードと実行速度 | きほんのき

結果、どれを選ぶべきか?

ぶっちゃけ、どれでも良いです。
著者の場合は速度重視なので、

$("selector")[0]

を使います。
もちろん、ピュアJavaScriptが速いですが、jQueryと混在するのはあまり好きではありません。
大量にループを回さない限り、どれも一緒だと思います。また、lengthの方が括弧を使わないので可読性が増すといった意見もあります。
処理時間もまた違った計測結果なっています。

モバイルバージョンを終了