複数の同一名クラスを、個別に処理したい

Question

HTML内の「同一class名を持つ複数の要素」にたいして、
それぞれ個別のタイミングで処理をする方法がわからず悩んでいます。

お手数ですがアドバイスをいただけないでしょうか。

【やりたいこと】

（スクロール中）要素が画面内の特定の位置に到達した時点で
その要素に対してclassを付与したい。

「その要素」は複数あり、jsでの処理の汎用性を高めるため
すべて同一のclass名がついている。

【現状の課題】

指定の位置でclass名を付与することはできたが、
最初の要素が特定の位置に到達したタイミングで
複数の要素すべてにclass名が付与されてしまう。
（すべて同時にどう処理が施されてしまう）

【ソースコード　HTML】

<div class="Container">

　<div class="Obje">
　　<img src="img/photo.img" alt="">
　</div>
　<div class="Obje">
　　<img src="img/photo.img" alt="">
　</div>
　<div class="Obje">
　　<img src="img/photo.img" alt="">
　</div>
　<div class="Obje">
　　<img src="img/photo.img" alt="">
　</div>
　<div class="Obje">
　　<img src="img/photo.img" alt="">
　</div>
　<div class="Obje">
　　<img src="img/photo.img" alt="">
　</div>

</div>

【ソースコード　js】

$(window).on('load scroll resize', function () {

　// 現在のスクロール位置を取得
　let Scroll = $(window).scrollTop();

　// 画面の高さを取得
　let Height = $(window).height();

　// classを付与する要素の位置を取得
　let Obje = $('.Obje').offset().top;

　// classが付与される位置を指定（画面の高さ1/4の位置）
　let active = Scroll + ( Height / 4 ) * 3 ;

　// 要素の位置が画面の高さ1/4の位置を超えたらclass「falldown」を付与
　if( Obje < active ){
　　$('.Obje').children('.Child').addClass('falldown');
　}
　
});

以上、よろしくお願いいたします。

Answer 1

$( '.Obje' ).each( function() {
  let Obje = $( this ).offset().top;
  // 
} );

【.each() | jQuery API Documentation】
https://api.jquery.com/each/

Comments

[Snpy]

できました！ありがとうございました！