jQueryの石積みと無限のスクロールprblem

Question

<script> 
$(window).load(function() { 
    var $wall = $('#content'); 
    $wall.imagesLoaded(function() { 
     $wall.masonry({ 
      itemSelector: '.oddpost', 
     isAnimated: true 
    }); 
    $(".oddpost").each (function (idx, el) { 
    if ($(el).position().left < $(el).width()) { 
     $('.rightarrow', el).show(); 
    } 
    else { 
     $('.leftarrow', el).show(); 
    } 
}); 
}); 

$wall.infinitescroll({ 
    navSelector: '#pagination', 
    nextSelector: '#pagination li a.pagination_nextlink', 
    itemSelector: '.oddpost', 
    loadingImg: "http://static.tumblr.com/qrevc1p/WTKlx2dsg/gsnjnwui-um.gif", 
    loadingText: " ", 
    donetext: " ", 
    bufferPx: 100, 
    debug: false, 
    errorCallback: function() { 
     $('#infscr-loading').animate({ 
      opacity: .8 
     }, 2000).fadeOut('normal'); 
    } 
}, function (newElements) { 
    var $newElems = $(newElements); 
    $newElems.hide(); 
    $newElems.imagesLoaded(function() { 
     $wall.masonry('appended', $newElems, { 
      isAnimated: true, 
      animationOptions: { 
       duration: 900, 
       easing: 'linear', 
       queue: false 
      } 
     }, function() { 
      $newElems.fadeIn('slow');  
     }); 
    }); 
    }); 
$('#content').show(500); 
    }); 
    </script> 

私はTumblrのテーマでこのスクリプトを使用しています。私はそれに石積みと無限のスクロールを適用するために取り組んでいます。 divは2列のレイアウトなので、divは左または右のいずれかにしか移動しません。そして、テーマに石積みを適用するのとは別に、左に行くdivには矢印（.rightarrow）を置き、右に行くものには別の矢印（.ft）を置きます。

これまでのところ、すべてこれまでうまくいきました。私の問題は、次のページが読み込まれるときに始まります。明らかに、矢印コードは最初のページにのみ適用され、新しく追加されたエレメントには適用されません。私はコードの異なる部分で矢印コードを反復しようとしましたが、私はそれに運がなかった。本当に私を混乱させ始めています。私はjQueryの新機能ではありませんが、実際にこの作業をしようとするのは苦労しています。

新しく追加されたdivにも適用されるように、矢印コードをどの部分に置くべきか教えてもらえますか？

Answer 1

矢印がページに追加された後に、矢印を示すコードを実行する必要があります。

コピー/貼り付けを避ける機能を使用することをお勧めします。

/** 
* Shows the appropiate arrow for a given element. 
*/ 
function showArrowOn(el) { 
    if ($(el).position().left < $(el).width()) { 
    $('.rightarrow', el).show(); 
    } else { 
    $('.leftarrow', el).show(); 
    } 
} 

$(window).load(function() { 
    ... 
    $(".oddpost").each(function (idx, el) { 
    // Using function to show the arrows on the items at window load. 
    showArrowOn(el); 
    } 
} 

$wall.infinitescroll({ 
    ... 
    $newElems.imagesLoaded(function() { 
    $wall.masonry('appended', $newElems, { 
     ... 
     }, function() { 
     // Show the arrows once the new elems are appended. 
     $newElems 
      .fadeIn('slow') 
      .each(function() { showArrowOn(this); }); 
     }); 

}); 

あなたがしている場合、これらは、あなたが（自分のCSSに依存して）自分の位置や幅のためのjQueryを頼む時に表示されていないので、あなたは、新しい要素の上に矢印を示すためにあなたのロジックといくつかのトラブルがあるかもしれません次のように試してください：

$newElems.fadeIn('slow', function() { showArrowOn(this); }); 

アイテムが表示されたら表示する矢印を計算します。