jQueryを書いている時、ページ内に特定の要素がある場合のみ実行させたい・読み込ませたい内容がある場合があります。そんな時に使える、特定の要素があるかどうか判別できる方法を解説していきます。
jQueryで特定の要素があるかどうかを調べる方法
jQueryで特定の要素があるかどうかを調べる(判別する)方法としてはいくつかあるのですが、今回はlengthプロパティを使用した方法を解説します。
lengthプロパティは、元々Javascriptで用意されている文字列の長さや配列内の要素数を取得できるプロパティです。jQueryではJavascriptのlengthプロパティを拡張し、jQueryのオブジェクト数を取得できるようになっています。
詳しくは、jQueryで要素の数を取得(カウント)するlengthプロパティの使い方【jQuery】で解説していますのでご覧ください。
lengthプロパティで特定の要素があるかどうかを判別する
lengthプロパティで特定の要素があるかどうかを判別するには以下のように記述します。
$(function(){
if($('#sample_block').length){
// ここに「#sample_block」が存在した場合の処理を記述
}
});上記のようにif($(要素名).length)とする事で、指定の要素があった場合に処理するという分岐を作成する事ができます。
※他の解説サイト等でsizeメソッド(size())で判別できるという内容がありますが、現在は廃止されているメソッドになりますので注意してください。
if($(要素名))での判別に関して
他の判別方法として注意していただきたいのが、以下のコードになります。
$(function(){
if($('#sample_block')){
～
}
});JavaScriptに慣れている方だと上記のような書き方をしてしまう場合があります。
JavaScriptでは大丈夫ですが、jQueryだと指定の要素が無い場合でもnullが返ってこない為、要素が無い場合でも要素があるのと同じ動作をしてしまいますので注意してください。
JavaScriptで判別するには
jQueryではなく、JavaScriptで判別する場合は以下のような記述で判別が可能です。
const sample_block = document.querySelector('#sample_block')
if (sample_block) {
～
}こちらも記述の仕方としてはいくつかありますので、参考にしてみてください。
さいごに
いかがでしたでしょうか。
今回は、jQueryで特定の要素があるかどうかを調べる方法について解説しました。
全ページ共通で読み込みさせているjsファイルなどで、特定の要素がある場合にだけ分岐しないとエラーになってしまう場合もありますので、状況に応じて使い分けてみてください。
