jquery - 要素がページの上をスクロールしたときに要素値を動的に変更する

Question

アイテムのリストを日付順にソートしていますが、ユーザーが要素をスクロールして、要素の日付

私のHTMLは次のようなものになります。

<div class="event_date">Jan 1, 2012</div> 
<div> stuff here </div> 
<div> stuff here </div> 
<div class="event_date">Jan 2, 2012</div> 
<div> stuff here </div> 
<div> stuff here </div> 
<div class="event_date">Jan 3, 2012</div> 
<div> stuff here </div> 
... 

を私はすでに私の現在のjavascriptはこのようになりますと、ページ上のユーザーがスクロール

<div id="current_date_box"></div> 

動かない固定のdivボックスを持っています：

$(window).scroll(function(){ 
    if ($(".event_date").offset().top < $(window).scrollTop()) { 
     //the code only affects the first element with class event_date 
     var selected_date = $(".event_date).html(); 
     $("#current_date_box").html(selected_date); 
    } 
}); 

スクロールはうまく動作し、スクロールで変更するデータを得ることができますが、問題は、クラスセレクタを使用しているため、常にクラスのリストから最初の要素だけが選択されることです。私はそれをページ上のすべてのクラス要素で動作させる方法がわかりませんし、カレンダーDBから引き出されているので仮想的に無限の量になる可能性があるので、それぞれ固有のIDを与えることはできません。 。

私はeq [i]などでも動作させようとしましたが、私はそれも理解できません。私もavailを使用しないで$（これ）を使用するさまざまな方法を試したが多分私はそれを間違って実装しています。

私は）私が

$(".event_date").offset().change() do something 

の線に沿って何かをしなければならないと思います。しかし（オフセット。変更は、（）はサポートされていません。

助けていただけたら幸いです！

Answer 1

クラスセレクタは、一致するすべての要素のコレクションを返す必要があります。しかし、あなたはそれぞれの機能でそれをラップする必要があります、私は思う...

$(window).scroll(function(){ 
    $window = $(window); 

    $(".event_date").each(function() { 
    var $this = $(this); 
    if($this.offset().top < $window.scrollTop()) { 
     $("#current_date_box").html($this.html()); 
    } 
    }); 
});