仅针对最后附加的 div 和 Shuffle.js

Question

我有一个 "load more" 按钮，单击该按钮后，会将一个新容器附加到我的搜索页面，其中包含结果。每个容器都有一个 class 迭代（例如：.results-1 .results-2 .results-3），具体取决于要加载的项目数量。

问题是，当我单击 "load more," 时，所有结果都会闪现到屏幕上，而不仅仅是新添加的项目。这是因为我的代码正在检测砌体网格中的所有项目，而不仅仅是附加的项目。

这一行就是问题所在，我认为：

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

当每个新容器都得到一个迭代的 class 时，我如何定位最近附加的项目？

非常感谢任何想法！这是一个没有 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. A similar conversation 使用相同的代码将新项目附加到网格中。

Answer 1

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

要解决这个问题，您可以将 .each() 方法 链接到 方法 .fadeIn() 之后，以便遍历所有新显示的元素并触发随机更新：

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

我将 jQuery 脚本替换为原始随机播放脚本，以便您可以使用随机播放 .add() 方法将新添加的元素添加到随机播放队列中。

仅针对最后附加的 div 和 Shuffle.js

Target only the last appended div with Shuffle.js

iteration

ajax

jquery

append

masonry