多くのユーザーは、jQueryを使用して要素がHTML DOMに存在するかどうかを確認する方法について疑問を持っています。一言で言えば、要素がページに存在するかどうかを可能な限り簡単な方法で確認するにはどうすればよいですか？
この結果を達成するために使用できる方法はいくつかあります。それらの1つは、要素セレクターの「長さ」プロパティが0より大きい数値を返すかどうかを確認することです。
たとえば、次のようなHTMLがあるとします。
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Lorem ipsum dolor</title>
5 <meta charset="utf-8">
6</head>
7<body>
8 <div id="myDiv">Lorem ipsum dolor sit amet.</div>
9</body>
10</html>
そして、要素「myDiv」がDOMに存在するかどうかを確認します。つまり、ページ上で次のコードを使用できます。
1if ($("#myDiv").length > 0) {
2 console.log("The element exists!");
3}
コードを簡素化する
JavaScriptの多くはtrueまたはfalseのいずれかであるため、「length」プロパティの戻り値もtrueまたはfalseと見なすことができます。戻り値は数値であり、0は「偽」を表し、その他はすべて「真」を表します。
したがって、次のようにコードを簡略化できます。
1if ($("#myDiv").length) {
2 console.log("The element exists!");
3}
比較の「> 0」を削除しても、戻り値は同じままです。
jQueryの「exists」関数を作成する
もう少し進んで、「exists」という名前の関数を追加できます。この関数は、チェックする要素で直接使用できます。
1jQuery.fn.exists = function() {
2 return ( $(this).length > 0);
3}
4
5var elementExists = $("#myDiv").exists();
6
7console.log(elementExists);
さらに改善し、メソッドが連鎖の可能性を表すのを防ぐことができます。この場合、これは不可能です。次のようにします。
1jQuery.exists = function(selector) {
2 return ( $(selector).length > 0 );
3}
4
5if ( $.exists("#myDiv") ) {
6 console.log("The element exists!");
7}
オブジェクトから直接チェーンをシミュレートするのではなく、「exists」関数への引数としてセレクターを渡すことに注意してください。
配列を使用してHTML要素の存在を確認する
jQueryでセレクターを使用すると、要素の配列が返されます。この配列の最初の要素にアクセスしようとして「undefined」が返される場合は、問題の要素がDOMに存在しないことを示しています。
1if ( $('#myDiv')[0] ) {
2 console.log("The element exists!");
3}
ご覧のとおり、ページ上のHTML要素の存在を確認する方法はいくつかあります。一番良いのは何ですか？さて、あなたの問題を解決するもの。重要なことは、コードが実行され、機能していることです。