1077

この質問にはすでに答えがあります。

によって作成された要素が存在するかどうかをどうやって確認するのですか?.append()方法?$('elemId').length私にはうまくいきません。


  • .lengthうまく動作します、ここを見てください:jsfiddle.net/yahavbr/A9zW2あなたが使用した場合#あなたのコードを投稿すれば、あなたが間違ったことをしていることがわかります。 - Shadow Wizard
  • idとクラスセレクタには$('#selector')。lengthと$(' .selector')。lengthを使用します。ドロップダウンのサイズを確認するには、$(' #selectorオプション')。size()を使用します。 - Majedur Rahaman

8 답변


1521

$('elemId').lengthうまくいかない   私です。

あなたが置く必要があります#要素IDの前:

$('#elemId').length
---^

一般的なJavaScriptでは、ハッシュは必要ありません(#例)document.getElementById('id_here')ただし、jQueryを使用する場合は、以下に基づいてターゲット要素にハッシュを設定する必要があります。idCSSと同じです。


  • そのため、CSSセレクターが使用されます"#elementId"要素で選択します。 " elementId"実際にはすべてのemenetを選択しますタグ" elementId"という名前が付けられます。 - Petr Gladkikh
  • @trejderポスターはVanilla JSを知らず、「vanilla JavaScript」と言ったときに最も可能性があります。彼らは実際に意味した基本JavaScript(「プレーン」のような「バニラ」、「未評価」)。 - D Coetzee
  • @trejder「Vanilla JS」のように見えます。とにかくベースJavascriptと全く同じです(ダウンロードされたファイルは常に空です) - 誰かがベースJavascriptの売り込みをすることに決めました。 - Brilliand
  • ええ、そのウェブサイトは" Vanilla JS"と呼ばれるフレームワークの必要性を嘲笑しています。これはJavaScriptそのものに他ならない。 @ trejderはもう少し注意深く読むべきです。 - LasagnaAndroid
  • ハッシュは必要ありません。あなたが間違った機能を使う場合だけ。document.querySelector('#id_here')同等のjQueryと同じだけハッシュ記号を必要とします$('#id_here')。 - AndreKR

311

セレクタの長さを調べてみてください。それが何かを返すのであれば、その要素は他には存在してはいけません。

 if( $('#selector').length )         // use this if you are using id to check
{
     // it exists
}


 if( $('.selector').length )         // use this if you are using class to check
{
     // it exists
}


  • 私はこのアプローチはとても直観的ではないと思います。数字が負であるかどうかを判断する方法を尋ねるのと同じようなもので、単純に呼び出すのではなく、アセンブリでコードを記述してから手動でCPUのレジスタのいくつかのビットを回転させる必要がある.isNegative()のようなメソッド。 '長さ'の値を確認するプロパティは物事を雑然とさせます。むしろ、コードをスキャンしているときにすぐに認識できる.exists()メソッドのようなものが表示されます。 - Aquarelle
  • いくつかの点で、jqueryはJavaScriptをよりアクセスしやすくするための飛躍的な進歩をもたらしましたが、それでも慣用句としては程遠いものです。 - lfender6445
  • この解決策は完全に直感的です。 lengthプロパティは、クエリに一致する要素数を示します。それについて直観的でも直接的でもないことは何ですか? - Alice Wonder
  • もっと直感的な関数を書くことができます。function exists(elementName) { return $(elementName).length; } - Sinister Beard

102

これを試して:

if ($("#mydiv").length > 0){
  // do something here
}

elementが存在しない場合、lengthプロパティはゼロを返します。


  • >は必要ありません。 0の場合、falseと評価されます。 - Wessam El Mahdy
  • 含めずにこれを機能させることはできません> 0。それが起こるかもしれない理由は何ですか? - KillahB

54

要素が存在するかどうかを確認する方法

if ($("#mydiv").length){  }

もしそれが0、それはに評価されますfalseそれ以上のものtrue

大なり小なり比較の必要はありません。


  • それは私のために働いていません。私が使っているブラウザはfirefox 32.02です。 - KeepMove
  • スニペットを自由に貼り付けてください - lfender6445
  • ありがとう、もう問題ありません。私はこれと交換しましたstackoverflow.com/a/21801090/2232458 - KeepMove

25

きみのelemIdその名前が示すように、Id属性は、これらが存在するかどうかを確認するためにあなたができるすべてです:

バニラJavaScript:より高度なセレクタがある場合は

//you can use it for more advanced selectors
if(document.querySelectorAll("#elemId").length){}

if(document.querySelector("#elemId")){}

//you can use it if your selector has only an Id attribute
if(document.getElementById("elemId")){}

jQuery:

if(jQuery("#elemId").length){}


  • 必要ありません!= nullとしてquerySelector常に戻りますnull(これは偽です)または要素 - 1j01
  • 私はまだ使いますif (document.querySelector("elemId") != null )コードの読みやすさを向上させるためだけに - Mrinmoy
  • @Mrinmoyあなたの考え方はJavaかC#から来ています。 JavaScriptでは、7つの偽の値(0、-0、null、未定義、''、NaN、false)があり、それらの偽の値を考慮しています。if (document.querySelector("elemId") != null )より読みやすいコードを書いても効果はありません。 JavaScriptの世界では、JavaやC#などの構造化プログラミング言語から考え方を守るのではなく、JavaScriptコミュニティの規約を理解することを強くお勧めします。この場合のJavaScript開発者向け!= null完全に冗長で読みにくくなっています。 - Mehran Hatami
  • @ MehranHatami、あなたはコードがjavaScripterによってのみ読み取り可能であることに同意しています、それでもなお彼は混乱したままにされますquerySelector()戻るnull or 0または他の5つの値のいずれか。querySelectorAll() 要素が見つからない場合、jQueryは異なる戻り値を返します。最近の人々はテクノロジーやフレームワークの集まりに取り組んでいるので、もっと読みやすくすることは確実に利益になると思います。ところで、私はjava / golangプログラマよりもjavascripterです。 - Mrinmoy
  • @ Mrinmoyこれは議論の余地のあるトピックではあるが、私が言ったことは事実よりも私の意見ではないと私は同意する。私のチームでは、 `!= null`のプルリクエストがあったとしても承認しません。これは慣例ですが、規則になっています。私にとって最も重要なことは、私のチームの開発者が基本を知っていることと、それらのコードが冗長性のないこととの整合性を保つことであることを確認することです。私にとっての!!nullは、!= falseのようなものですが、if文にとっては有効な条件ですが、それ自体は冗長です。 - Mehran Hatami

12

配列のような表記法を使って最初の要素をチェックすることもできます。 空の配列またはコレクションの最初の要素は単純にundefinedだから、あなたは "通常の" JavaScriptの真実/偽のふるまいをすることができます:

var el = $('body')[0];
if (el) {
    console.log('element found', el);
}
if (!el) {
    console.log('no element found');
}


8

オブジェクトの存在をテストするためにネイティブJSを使うことができます。

if (document.getElementById('elemId') instanceof Object){
    // do something here
}

忘れないでください、jQueryはネイティブのJavascriptコマンドとプロパティを洗練された(そして非常に便利な)ラッパーにしただけです。


  • 必要ありませんinstanceof Object - 1j01

-14

要素にクラスがある場合は、次のことを試すことができます。

if( $('.exists_content').hasClass('exists_content') ){
 //element available
}


  • 要素が存在しない場合は、どのようにしてクラスを確認できますか。 - Pir Abdul
  • うわーはその答えが来るのを見なかった - Munkhdelger Tumenbayar

リンクされた質問


関連する質問

最近の質問