Question

我有一组图像，每个图像都有data-type="type,type"，所以为了让我的生活更轻松，我打算抓住数据类型，并将它们变成一个数组（将它们包装成每个span）并将它们附加到＆＃34;类别＆＃34;元件。

$('li.grid-item').each(function () {
    // grab a reference to the current li
    var $el = $(this);
    // get the url from its data-class attribute
    var arr = $el.find('img').data('type').split(',');

    $.each(arr, function (index, value) {
        $el.find('.category').append('<span>' + value + '</span>');
        $el.addClass(value);
    });
});

<li class="grid-item">
    <figure>
        <img src="img/sticker/still/sticker_30.png" alt="sticker" title="You know I'm good" data-type="others/" data-price="9 bahts" data-alt="img/sticker/ani/sticker_30.gif" />
    </figure>
    <a href="#">
        <span class="download ala_carte">CONTINUE</span>
    </a>
    <div class="category"></div>
</li>

它工作正常，但每个值重复20个，请帮忙。如何删除那些重复的数组值？请提前帮助，谢谢。

Answer 1

我认为最好先在阵列上收集所有现有类型（如果还没有，则只添加新值）。之后，您可以为每种类型添加span元素。你应该只有一个＆＃34;类别＆＃34;容器列出所有类型。

<强>更新

您的函数经常执行（超过20次），因为每当$ grid.imagesLoaded（）取得进展时您都会调用它。当你完成时，请打电话给它＃34; 尝试替换

$grid.imagesLoaded().progress()

带

$grid.imagesLoaded().done()

仅在加载所有图像后调用您的函数一次。此外，您可以在重新填充之前清空类别容器。

删除元素数据生成的重复值

1 个答案: