Shuffle.jsで最後に追加されたdivのみを対象にします

Question

クリックすると検索結果ページに新しいコンテナが追加されます。各コンテナは、ロードするアイテムの数に応じて反復するクラス（例：.results-1 .results-2.results-3）を取得します。

「もっと負荷をかける」をクリックすると、新しく追加されたアイテムだけでなく、すべての結果が画面に点滅するという問題があります。これは、私のコードが追加されたものだけでなく、石積みグリッド内のすべてのアイテムを検出しているためです。

この行は問題ですが、私は思う：それぞれの新しいコンテナはその反復処理するクラスを取得するときに

$('.gallery-photo [class of only most recent append goes here?]').each(function() { 

は、どのように私は、最近追加項目をターゲットにすることができますか？

アイデアをいただければ幸いです！ここにはPHPなしのfiddleの例があります。

$(function() { 
    $(".gallery-photo").slice(0, 4).show(); 
    $("#loadMore").on('click', function(e) { 
    e.preventDefault(); 
    $(".gallery-photo:hidden").slice(0, 4).fadeIn(); 
    $('.gallery-photo').each(function() { 
     var $newRow = $(this); 
     $('.masonry-gallery').append($newRow); 
     $('.masonry-gallery').shuffle('appended', $newRow); 
    }); 
    }); 
}); 

$(document).ready(function() { 
    var $grid = $('.masonry-gallery'); 
    $grid.shuffle({ 
    itemSelector: '.gallery-photo' // the selector for the items in the grid 
    }); 
}); 

P.S.この石造格子はshufflejsを利用しています。同様の会話hereは、新しい項目をグリッドに追加するために同じコードを使用します。

Answer 1

あなたが指摘したように、問題はあなたがすべての要素を追加するのではなくフェードインされている要素だけということである。

それを解決するには、後で.fadeIn()方法を.each()方法をチェーンすることができます新しく表示されたすべての要素を反復処理し、シャッフルの更新をトリガするために：

Updated Example

$("#loadMore").on('click', function(e) { 
    e.preventDefault(); 

    $(".gallery-photo:hidden") 
    .slice(0, 4) 
    .fadeIn() 
    .each(function() { 
     $('.masonry-gallery').shuffle('appended', $(this)); 
    }); 
}); 

---

以下のコメントに基づいて、要素が別の要素（この場合は、追加された要素を含む#elements-to-appendというコンテナ要素があります）から追加される別の代替例があります。

Updated Example

var $gallary = $('.masonry-gallery'); 
$gallary.find('.gallery-photo').show(); 

var shuffle = new window.shuffle($gallary.get(0), { 
    itemSelector: '.gallery-photo' 
}); 

$("#loadMore").on('click', function(e) { 
    e.preventDefault(); 
    var $elementsToAppend = $('#elements-to-append').children(); 

    $gallary.append($elementsToAppend); 
    $elementsToAppend.fadeIn().each(function(_, element) { 
    shuffle.add([element]); 
    }); 
}); 

あなたがシャッフルキューに新しく追加要素を追加するためにシャッフル.add()メソッドを使用することができるように、私は、元のシャッフルスクリプトでjQueryのスクリプトを置き換えます。