javascript - JQuery/infinitescroll 和同位素 - 检查重复项并删除

Question

我正在使用无限滚动 ( https://github.com/paulirish/infinite-scroll ) 和同位素 ( http://isotope.metafizzy.co/ )。我当前检查当前容器中是否存在具有 id 的元素，以及新加载的数据中是否存在相同的 ID，我需要将其删除。当新结果中存在具有相同 ID 的元素时，以下代码将发出警报，但不会将其删除。有人可以帮忙吗？

 // Infinite Ajax Scroll configuration
            $container.infinitescroll({
                navSelector: "div.paginate",
                nextSelector: "div.paginate a",
                itemSelector: "div.element",
                loading: {
                    //finished: undefined,
                    finishedMsg: "<em>Congratulations, you've reached the end of the internet.</em>", //doesn't work, workaround below
                    img: "public/img/ajax-loader.gif",
                    msg: $('<div id="infscr-loading"><img alt="Loading..." src="public/img/ajax-loader.gif" /></div>'),
                    }
            },
            function(newElements) {

                var $newElements = $(newElements).css({opacity: 0});
                //remove the first item
                $newElements.splice(0, 1);

                if($newElements.length == 0){
                  $('div#infscr-loading').hide();
                  $("div#infscr-finished").fadeIn(1000);
                  $("div#infscr-finished").fadeOut(1500);

                    //remove infinate scroll 
                    $container.infinitescroll('destroy');
                } else {

                //remove any repeated discounts
               /* $(".element").each(function() {
                    var discount_id = "#" + this.id;
                    if($newElements.find(discount_id)){
                       $container.find(discount_id).remove();
                    }
                });*/



var uniqueElements = $(newElements).filter(function(i, el) {
    return !$('#container').find('#' + $(el).attr('id')).length
});

console.log( uniqueElements );


                $container.isotope('appended', $newElements);

                }

            });

Answer 1

尝试使用filter方法删除所有重复项。我假设您有一个 #container div，其中包含所有 div.element 项。在您的示例中，我们正在过滤 #container div 中找不到的所有 $newElements。

$container.infinitescroll({
    navSelector: "div.paginate",
    nextSelector: "div.paginate a",
    itemSelector: "div.element",
    loading: {
        finished: undefined,
        finishedMsg: "<em>Congratulations, you've reached the end of the internet.</em>",
        img: "public/img/ajax-loader.gif",
        msg: $('<div id="infscr-loading"><img alt="Loading..." src="public/img/ajax-loader.gif" /><div></div>'),
    },
    errorCallback: function() {
        alert('no discounts');
    },
}, function(newElements) {
    var $newElements = $(newElements).css({opacity: 0});
    //remove the first item
    $newElements.splice(0, 1);
    //remove any repeated discounts
    return $newElements.filter(function(i, el) {
        return !$('#container').find('#' + $(el).attr('id')).length
    })
});

我 fork 了你的 fiddle 并添加了过滤功能。

var newElements = ['<div class="element" id="id1">1</div>', '<div class="element" id="id4">4</div>', '<div class="element" id="id5">5</div>'];

$('.update').click(function(e) {

    var uniqueElements = $(newElements).filter(function(i, el) {
        return !$('#container').find('#' + $(el).attr('id')).length
    });

    console.log( uniqueElements );

});

http://jsfiddle.net/aBSP2/