使用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

正如您所指出的，问题是您附加了所有元素而不仅仅是淡入的元素。

要解决此问题，您可以在 .each()方法之后链接.fadeIn()方法，以便迭代所有新显示的元素并触发随机更新：< / p>

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]);
  });
});

我用原始的shuffle脚本替换了jQuery脚本，以便您可以使用Shuffle .add()方法将新附加的元素添加到shuffle队列中。