Question

我正在使用infinitescroll（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个项目。在您的示例中，我们会过滤$newElements div中找不到的所有#container。

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

我分叉你的小提琴，并添加了一个过滤功能。

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/

Answer 2

您的代码应该有效。为了幽默我，试着改变......

$newElements.find(discount_id).remove();

为：

$(newElements).find(discount_id).remove();

可能与元素缓存问题有关，或者.css属性更改被分配回变量。

Answer 3

这解决了你的问题。 http://jsbin.com/uCOyimAc/1/edit

 var newElements = ['<div class="element" id="id1">1</div>', '<div class="element"  id="id5">4</div>', '<div class="element" id="id2">2</div>'];
 var splice_count = 0;
 $(newElements).each(function(key,val){
     var id = $(val).attr('id');
     if($("#container").find('#'+id).length){
         newElements.splice(key-splice_count,1);
         ++splice_count; 
     }
  });
  console.log(newElements);

JQuery / infinitescroll＆amp;同位素 - 检查重复并删除

3 个答案: