necotech blog

jQueryで、DOM要素が存在している時だけ関数を実行する

ページごとに実行したいスクリプトが異なるけど、ファイルを一々複数用意したくない場合、またはとある要素(カルーセルとかボタンとか)がある時だけスクリプトを実行したい場合など、「ページ上に要素が存在している時のみスクリプトを実行」させたいことがあります。具体的に書くと下記みたいな実装になって、そのサイトの構成とかにもよりますが割と頻出します。

(function(section){
  if(section.length === 0) return;

  // Indexページで実行
})($("#index"));

(function(section){
  if(section.length === 0) return;

  // Newsページで実行
})($("#news"));

(function(button){
  if(button.length === 0) return;

  // ボタンがあるページで実行
})($(".button"));

そのパターンをjQueryプラグインにすると、すごく簡単なスクリプトになりました。


URLベースで実行する仕組みはよくあるんだけどね。以下はKAYACさんの実装。

そこそこ規模が大きくても何とかなるjavascriptの設計(URL dispatcherの薦め) | tech.kayac.com – KAYAC engineers’ blog

Share on Facebook
Share on LinkedIn
Pocket