【プラグインなし】ウィンドウ内に特定要素（複数対応）が表示されたかjQueryで判別する方法【javascript】

　前回、プラグインを使用しないで特定の要素がウィンドウ内（表示領域）に存在するか判別する方法を紹介しましたが、今回は前回の応用編として複数の要素に対応する方法を紹介したいと思います。

　前回の記事は下記の関連記事をご参照ください。

環境

　なお、今回は下記のjQueryのバージョンを使って実装したいと思います。

１つの要素の判別方法

　まずは、おさらいも含めて前回作成したコードを見てみましょう。

	
	
TARGET

	
	

　上記のコードでプラグインを使わずにjQueryのみで特定の要素が表示領域に存在するか判別することができます。

　簡単に説明すると、ページの読み込みが完了したタイミングでターゲットとなる要素の位置を取得してスクロールイベントを感知することで表示領域内に要素が存在するか判別しています。

複数要素の判別方法

　では、要素が複数になった場合はどのようにするかと言うと至って簡単です。特に難しいことは何もなくeachメソッドを使用することで簡単に実現できます。

　実際に上のコードを改変して複数要素に対応したコードに改修してみたいと思います。

	
TARGET1
	
TARGET2
	
TARGET3

	
	

　ベースは単一の場合と同じで、複数の要素に対応するためにスクロールイベント内31行目でeachメソッドを使って複数に対応しているだけですね。これで対応させたい要素に「target」というクラス名をつけてあげるだけで動作します。ただし、サイトの作りによっては動作しないこともあるので、その場合は適宜調整してみてください。

まとめ

　ということで、今回はプラグインは使わずにjQueryのみで特定要素がウィンドウ内（表示領域）に存在するか判別する方法の応用編として複数の要素に対応する方法を紹介させていただきました。

　それでは今回はここまで！また！