Javascript JQuery/infinitescroll&；同位素-检查重复项并移除

我正在使用infinitescroll（）和同位素（）。我当前检查当前容器中是否存在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);

                }

            });

//无限Ajax滚动配置
$container.infinites卷({
导航选择器：“div.paginate”，
下一个选择器：“div.paginate a”，
项目选择器：“div.element”，
装载：{
//完成：未定义，
finishedMsg：“祝贺你，你已经到达了互联网的尽头。”，//不起作用，下面是解决方法
img：“public/img/ajax loader.gif”，
味精：$（''），
}
},
函数（新元素）{
var$newElements=$（newElements）.css（{opacity:0}）；
//删除第一项
$newElements.拼接（0,1）；
如果（$newElements.length==0）{
$（'div#infscr loading'）.hide（）；
$（“infscr完成”）.fadeIn（1000）；
$（“已完成的div#infscr”）。淡出（1500）；
//删除内页滚动条
$container.infinitescroll（'destroy'）；
}否则{
//删除任何重复的折扣
/*$（“.element”）。每个（函数（）{
var折扣_id=“#”+this.id；
if（$newElements.find（折扣\标识））{
$container.find（折扣_id）.remove（）；
}
});*/
var uniqueElements=$（新元素）.filter（函数（i，el）{
return！$（'#container'）.find（'#'+$（el.attr（'id'））.length
});
控制台日志（uniqueElements）；
$container.同位素（'added'，$newElements）；
}
});

您的代码应该可以工作。为了取悦我，试着改变

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

致：

---

这可能与元素缓存问题有关，也可能与将

.css

属性更改分配回变量有关。

尝试使用

过滤器

方法删除任何重复项。我假设您有一个

#容器
div，其中包含所有
div.element
项。在您的示例中，我们正在筛选在
#容器
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
    })
});

$container.infinitescroll({
导航选择器：“div.paginate”，
下一个选择器：“div.paginate a”，
项目选择器：“div.element”，
装载：{
完成：未定义，
finishedMsg：“祝贺你，你已经到达了互联网的尽头。”，
img：“public/img/ajax loader.gif”，
味精：$（''），
},
errorCallback:函数（）{
警惕（“无折扣”）；
},
}，函数（新元素）{
var$newElements=$（newElements）.css（{opacity:0}）；
//删除第一项
$newElements.拼接（0,1）；
//删除任何重复的折扣
返回$newElements.filter（函数（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 );

});

var newElements=['1'，'4'，'5']；
$（'.update'）。单击（函数（e）{
var uniqueElements=$（新元素）.filter（函数（i，el）{
return！$（'#container'）.find（'#'+$（el.attr（'id'））.length
});
控制台日志（uniqueElements）；
});

这解决了您的问题

var newElements=['1'，'4'，'2']；
var-u计数=0；
$（新元素）。每个（函数（键、值）{
var id=$（val.attr（'id'）；
if（$（“#容器”）.find（“#”+id.length）{
新元素拼接（键拼接计数，1）；
++剪接计数；
}
});
console.log（新元素）；
以上问题的一个工作示例，太多帮助理解实际问题…：）我试图做一个JS小提琴，但不知道如何做一个html元素数组，该数组将作为“新元素”返回。有什么建议吗？我添加了一个JSFIDLE，但正如您所看到的，我正在努力……似乎没有什么不同：/嗯，非常奇怪。这肯定与新元素列表有关。在尝试.remove（）之前，当控制台记录$newElements时会发生什么情况？它输出以下内容：对象6.元素，div，div，div，div，div，div，div，div，div，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，399630.元素，div，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，第513.3.3.3.3.3.3.3.3.元素，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣，折扣打折，div#折扣542836.element，div#折扣405295.element，div#折扣273143.element，div#折扣600727.element，div#折扣445731.element，div#折扣486335.element，div#折扣116568.element]是的，这很有意义，正是我所需要的。但是，在将代码更改为上面的代码后，它现在在滚动时根本不会显示任何新项目。我认为这是因为它没有添加到同位素中（我错过了原始查询中的那部分代码）。我会看看我是否能弄明白。我一点也不能弄明白，我对JQuery语法很糟糕，也不知道如何使用我的代码。你可能只需要连接无限卷轴和同位素，这样他们就可以相互交流了。将我链接到你的代码，我会看一看。内联卷轴的所有代码都在上面，我t链接到同位素，如：$container.同位素（'added'，$newElements）；当我从JSFIDLE获取您的代码并将其插入到我的代码中时，consol.log返回一个空对象。我已修改了上面的原始代码。您的HTML标记中需要
。如果您有另一个包含
div.element
的容器，请替换
返回
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 );

});

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