要素がjQueryに存在するかどうかを本当に確認する必要がありますか？

Question

最近、jQueryで要素が存在するかどうかを正しく確認する方法について質問がありました。私が一緒に仕事

if ($("#myDiv").length) { 
    // Do something 
} 

一人の男が言う

チェックする正しい方法は次のようになります。：

if ($("#myDiv") && $("#myDiv").length) { 
    // Do something 
} 

がそれを問題い要するに

https://learn.jquery.com/using-jquery-core/faq/how-do-i-test-whether-an-element-exists/

：私はここから答えを見つけました？私はパフォーマンスやレイテンシを賢明に表していますが、同じことをするのでしょうか？また

：jQueryの機能のこれらのタイプの

$("#myDiv").show(); 
$("#myDiv").hide(); 
$("#myDiv").val(''); 

、#myDivは、正しい存在しない場合、彼らはエラーは発生しませんので、何ifチェックは必要ありませんが？

jQuery 1.6.4を使用しています。

Answer 1

一人の男は、チェックするための正しい方法があるべきと言います：

if ($("#myDiv") && $("#myDiv").length) { 
    //do something 
} 

彼は少なくともの面で、間違っています部。 jQueryの$(selector)常にはオブジェクトを返します。これは定義上真実です。その部分が無意味なので、何の理由もなくDOMを再クエリします。

パフォーマンスやレイテンシから判断すると、同じことをするのでしょうか？

再照会理由もなくDOMことは無駄であるが、ほとんどの時間は、それがいかなる観察可能な方法で重要であり、特にないgetElementByIdに呼び出しにはjQueryによって最適化されている$("#myDiv")などのIDセレクタのためにはありません（それは驚異的に速い）。だから一方では、それは無駄な余分な仕事です。一方で、ブラウザーは、今日は非常に速く、おそらくあなたは魚を揚げるのにもっと大きな魚を持っているでしょう。しかし、おそらく余分な無意味なコードであり、これは大きな問題です。

一般的な点：jQueryはセットベースです。これは、要素のないセットに対する操作がno-opsであることを意味します。例えば：何.foo要素がDOMでない場合

$(".foo").addClass("bar"); 

...ノーオペレーション（ないエラー）です。

要素に一致するかどうか気にする場合は、lengthを確認してください。気にしないで、に操作を実行したい場合は、の場合は、操作を実行してください（重要な注意点が1つあります））。

だから基本的には、3つのシナリオがあります。

1. あなたは、要素があるだろう知っているので、チェックは無意味
   =>何のチェック

2. ではありませんあなたは要素を知らないだろうあなたはelemeかどうかを気に何のチェック

3. 
   =>彼らはしているが存在しませんが、気にしてばかり場合それらを操作する必要はありませんNTSは、他のいくつかの理由がある
   =>チェックを行う

---

ここで重要な注意点があります：あなたは、例えば（jQueryオブジェクト以外の何かを返すjQueryの関数を呼び出している場合、val()またはoffset()またはposition()など）、空のセットで呼び出すと、通常はundefinedが返されます（例外はtext()で、""を返します。text()はいくつかの点で他と似ていません。これはそれらの一つです]）。そうすれば、たとえセットが空であっても、あなたが期待しているものが返されると仮定すると、コードはあなたを噛ませるでしょう。例えばので

：なし.foo要素がない場合offset()はundefined、いないオブジェクトを返しますので、

if ($(".foo").offset().top > 20) 

...は、エラーがスローされます。

しかし、これは素晴らしいです：

$(".foo").closest(".bar").toggleClass("baz"): 

...何.fooが存在しない場合でも、closest()は別の空のjQueryのセットを返し、その上にtoggleClass()を呼び出すと、何もしませんしますので。例えば

あなたは、少なくとも1種の元素を含むセットを扱っていることを確認するためにわからない場合は、jQueryオブジェクトを返しませんアクセサを扱うときに、あなたはより多くの防衛を必要とする、：

再び

var offset = $(".foo").offset(); 
if (offset && offset.top > 20) 

、（jQueryのオブジェクトを返しません）ほとんどのアクセサはval()、offset()、position()、css()含めて、これを行う、...

Answer 2

が2回実行されていないため、$("#myDiv").lengthが良いです。あなたは、セレクタをキャッシュしていた場合、それははるかに少ないのも問題になります。

var $myDiv = $("#myDiv"); 

if ($myDiv && $myDiv.length) { ... } 

しかし、jQueryのセレクタはいつも

if ($('#myDiv')) { 

は無意味チェックです、「truthy」と解釈されます何かを返します。私が一緒に仕事

Answer 3

一人の男は、チェックするための正しい方法があるべきと言う：

if ($("#myDiv") && $("#myDiv").length) { 
    //do something 
} 

この文は偽です。 $("#myDiv").lengthのチェックは、見つからない場合は単に0を返します。確かに、ここに存在していないのですが見つかっidの両方でのコード例だ、と第二id：私が一緒に仕事

console.log("Count of #myDiv's found: " + $("#myDiv").length); 
 
console.log("Count of #AnotherMyDiv's found: " + $("#AnotherMyDiv").length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
 
<div id="myDiv"></div>

Answer 4

あなたはif文の後にやっていることに依存します。

このように考える。どんなjqueryセレクタ呼び出しでも、基本的に配列がさまざまなメソッドで拡張されたjqueryオブジェクトが返されます。 $(".my-elements").show()のようなものを呼び出すと、$(".my-elements")が返した要素がループし、.show()が適用され、jqueryチェーンの仕組みと同じjqueryオブジェクトが返されます。

あなたが連鎖可能なものを実行している場合は、いいえ、チェックをする必要はありません。後続のメソッドはすべて、for (var i=0; i<0; i++){ }に相当するループを実行するだけなので、何も起こりません。もしあなたが大きなチェーンを持っていて、それが大きなパフォーマンスを必要とする大きなループで実行しているのであれば、ifチェックをしたいかもしれませんが、一般的にパフォーマンスの観点からは重要ではありません。

しかし、要素が存在しない場合はエラーを返すか、結果が悪い場合はifチェックを使用します。インスタンス

function addHeight() { 
    var height1 = $("#div1").height(), 
     height2 = $("#div2").height(); 

    $("#otherDiv").css({ top: height1 + height2 }); 
} 

についてdiv1またはdiv2場合はotherDivが、それはあなたがのために行くしているものはおそらくないNaNにトップセットのでしょう存在しません。この場合、div1とdiv2の両方が実際に存在することを確認する必要がありますが、存在しない場合は何も起こらないため、実際にotherDivを確認する必要はありません。

Answer 5

存在するかどうかを確認する方が簡単ですし、オブジェクトからの詳細情報が必要な場合はnullオブジェクトエラーは受け取りません。

if (!!$("#myDiv")) { 
    //do something 
}