防止相同的图像被两次添加到数组中

Question

我有一个由单张图片和照片集组成的图片库。对于后者，我添加了额外的 div 以将它们并排放置。下面是我的 HTML：

<div class="container">

<article>
<figure>
<div data-layout="1212" id="justified">
<div class="photoset-row photoset-row-1" style="overflow: hidden;">
<div class="photoset-cell" style="display:inline-block;overflow:hidden;vertical-align:top;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;"><img src="https://unsplash.it/1200/900/?image=702" data-width="1200" data-height="900" style="width: 100%; height: auto; display: block; opacity: 1;"></div>
</div>
<div class="photoset-row photoset-row-2" style="margin-top: 3px; overflow: hidden;">
<div class="photoset-cell" style="display: inline-block; overflow: hidden; vertical-align: top; width: 50%; box-sizing: border-box; padding-right: 1.5px;"><img src="https://unsplash.it/1200/900/?image=695" data-width="1200" data-height="900" style="width: 100%; height: auto; display: block; opacity: 1;"></div>
<div class="photoset-cell" style="display: inline-block; overflow: hidden; vertical-align: top; width: 50%; box-sizing: border-box; padding-left: 1.5px; float:right;"><img src="https://unsplash.it/1200/900/?image=675" data-width="1200" data-height="900" style="width: 100%; height: auto; display: block; opacity: 1;"></div>
</div>

</div>
</article>
</figure>

<article>


<figure class="post post--photo" role="img">
<img class="post__img" src="https://unsplash.it/1200/900/?image=511" data-width="1200" data-height="900">
</figure>

</article>


<article>

<figure class="post post--photo" role="img">
<img class="post__img" src="https://unsplash.it/1200/900/?image=514" data-width="1200" data-height="900">
</figure>

</article>

然后我使用 jQuery 为 Photoswipe 创建一个数组，如下所示：

'use strict';

/* global jQuery, PhotoSwipe, PhotoSwipeUI_Default, console */

(function($) {

// Init empty gallery array
var container = [];

// Loop over gallery items and push it to the array
$('article').find('figure, .photoset-cell').each(function() {
var $link = $(this).find('img, video'), 
  item = {
    src: $link.attr('src'),
    w: $link.data('width'),
    h: $link.data('height'),
  };
container.push(item);
}), 

// Define click event on gallery item
$('img, video').click(function(event) {

// Prevent location change
event.preventDefault();

// Define object and gallery options
var $pswp = $('.pswp')[0],
  options = {
    index: $(this).closest('figure, .photoset-cell').index('figure, .photoset-cell'),
    bgOpacity: 0.9,
    showHideOpacity: true,
  };
// Initialize PhotoSwipe
var gallery = new PhotoSwipe($pswp, PhotoSwipeUI_Default, container, options);
gallery.init();
});

}(jQuery));

一切都很好，除了一件事：photoset 数组中的第一个法师被添加到数组中两次。我怎样才能防止这种情况发生？

您可以在此处查看演示：https://codepen.io/anon/pen/MOprem

Answer 1

您的问题是您的 photoset-cell div 包含在 <figure> 元素中。所以这段代码：

$('article').find('figure, .photoset-cell')

找到 <figure> 元素并将第一个图像推入其中，即

<img src="https://unsplash.it/1200/900/?image=702"

然后找到第一个photoset-cell（带有图像702的那个）并再次推送其中的图像。因此，您会在图库中获得第一张图片的两个副本。

最简单的解决方法是删除 photoset-cell div 周围的 <figure> 元素。如果由于布局原因无法做到这一点，那么根据您提供的代码，最简单的解决方法可能是更改此行：

$('article').find('figure, .photoset-cell').each(function() {

到：

$('article').find('figure.post, .photoset-cell').each(function() {