jQueryで要素、クラス名の有無で実行する方法

jQueryで要素、クラス名の有無で実行する方法

こんにちは、ちゃんけいです。

日曜日にサカナクションのライブに行ってきました。最高でした。おかげさまで6年連続いけてます、サカナクションについてはまたこんど書きたいと思います。

さて今回は、表題の通りに「jQueryで要素または、クラス名の有無で実行する」方法を紹介したいと思います。

例えば、jsファイルを1つにまとめている場合に、

「このページにはスライダーがないからエラーがでてる、そのせいで他のjsがうごいてない、、、」

なんて時に大活躍!いってみましょう!

簡単にできるのでこちらをコピペ!

See the Pen 要素があるか判別 by Chankei (@Chankei) on CodePen.0

なんとこれだけです。。。

「.length()」で「$(‘ID名やクラス名’)」こちらで取得した要素の数を調べています。

  • もし要素がなければ、「undefined」が戻り値になりif文ではfalseになります。
  • もし要素があれば、「.length()」の値がかえってくるのでif文ではtrueの処理に入ります。

このような方法で、要素やID名、クラス名があるかないかを判別することができます。

こんなに簡単にできるので是非使ってみてください!

ちなみに、同じようなソースで「.size()」を使うことで判別ができるのですが、こちらを使うと関数呼び出しのオーバーヘッドがかかるので「.length() 」を使ってください。
公式でも「.size()」は非推奨になっています。

 

オーバーヘッドってなに!?

さらっと出てきました、オーバーヘッドってなに?と思う方がいると思います。

簡単に言うと、「余分な作業」です。

できるだけ小さい方が処理がはやくなるので、少なくするように心がけましょう!笑

 

まとめ

今回はものすごく簡単な内容になったと思います。

簡単なのに使い所は多いと思うので是非使ってみてください。

 

それでは今回はこの辺で、ちゃんけいでした。