jqueryで要素を持っているかどうか判定する方法

「.length」を使った判定

基本コードはコピペなのですが、よくよく見返したら1番使っていました。
実際にどのように使ったか、コードと一緒に記述。

#pc_sliderの中の.sp-slideが2つの時の条件分岐

if( $('#pc_slider').find('div.sp-slide').length == 2 ){
//　ここに条件分岐のコード
}

#wpadminbarがあった時の条件分岐

if($('#wpadminbar').length){
//　ここに条件分岐のコード
}

.js_flexboxの中に.col_boxがあるだけforループを回す

for (i = 0; i < $('.js_flexbox').find('.col_box').length; i++) {
//　ここにループさせるコード
}

「.hasClass()」を使った判定

「.hasClass()」を使うときは、()の中に入れるクラス名は「.（ドット）」はいらない

if ($("#wrapper").hasClass("wrap")) {
//　#wrapperの中にクラスwrapがあったら
} else if (!$("#hoge").hasClass("active")) {
//　#wrapperの中にクラスwrapがなかったら
}

似たようなコードがあったので後で調べる用のメモ

「:has()」

▼参考
http://www.jquerystudy.info/reference/selectors/has.html

「.has()」

▼参考
http://www.jquerystudy.info/reference/traversing/has.html

「.size()」を使った判定

基本的には、「.length」とほとんど変わらないようで、javascriptに書き換えると以下のようです。

//　jQueryで書いた以下のコードが
$(".classname").size()

//　javascriptだとこうなる
document.getElementsByClassName("classname").length

参考

▼脱jQuery .size() と 諸注意
https://q-az.net/without-query-size/

まとめ

「.size()」と異なり、関数呼び出しのオーバーヘッドが無い分「.length」の方が好ましいらしいので、とりあえず「.length」使っておけばいいと思う。