不允许将重复项推入数组答案

【问题标题】：Not allowing to push duplicate items into array不允许将重复项推入数组
【发布时间】：2013-03-12 22:00:38
【问题描述】：

基本上我将容器推入一个数组，一旦一个被推入，我不想让同一个被再次推入。

这是我的 JSfiddle：http://jsfiddle.net/9Dmcg/3/

Javascript：

$(document).ready(function(){

var favorites = [];
var counter = 0;

    $('.containers').on('click', function(){

        favorites.push($(this).clone())

        $('.favorite').append(favorites);
    });


});

我需要想办法解决这个问题。

【问题讨论】：

添加e，例如$('.containers').one('click',
您也可以添加$(this).data('favorites', true)
不确定我是否理解。我尝试了 JSFiddle，并且每个容器只被推送一次。您的意思是您不希望多次推送具有相同内容的容器？

标签： javascript jquery arrays push

【解决方案1】：

除非该点击事件有更多内容，否则您可以使用.one() 方法代替.on 来获得此功能。

$(document).ready(function(){

    var favorites = [];
    var counter = 0;

    $('.containers').one('click', function(){

        favorites.push($(this).clone())

        $('.favorite').append(favorites);
    });    

});

http://jsfiddle.net/9Dmcg/4/

即使还有更多，你仍然可以使用.one()：

$(document).ready(function(){

    var favorites = [];
    var counter = 0;

    $('.containers').one('click', function(){

        favorites.push($(this).clone())

        $('.favorite').append(favorites);

        $(this).on("click",function(){
             alert("Favorite Added!");
        }).triggerHandler("click");

    });    

});

http://jsfiddle.net/9Dmcg/5/

【讨论】：

【解决方案2】：

我会说尝试检查元素 ID。像这样的：

$(document).ready(function(){

var favorites = [];
var counter = 0;

    $('.containers').bind('click', function(){
        var isAdded = false;
        for (var f = 0; f < favorites.length; f++) {
            console.log(favorites[f].id + "|" + this.id);
             if (favorites[f].id === this.id)
                 isAdded = true;
        }

        if (!isAdded)
            favorites.push($(this).clone()[0])


         console.log(favorites);
        $('.favorite').append(favorites);
    });


});

这是一个工作示例 -> http://jsfiddle.net/9Dmcg/7/

mz

【讨论】：

【解决方案3】：

这可以使用 JS 代理 (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) 完成

以下是创建不接受重复条目的数组的代码

var arr = new Proxy([], {
  get: function(target, key) {
    return target[key];
  },
  set: function(target, key, value){
    if(target.indexOf(value)>=0) return false;
    target[key] = value;
    return true
  }
});
arr.push(100);
arr.push(100); // this will throw error

在上面的代码中，我们正在修改数组的默认行为，因为对数组进行的任何修改都会调用 set 方法。

【讨论】：

【解决方案4】：

你可以检查元素是否已经存在：

$(document).ready(function(){

    var favorites = [];

    $('.containers').on('click', function(){
        var found = false;
        for(var i = 0; i < favorites.length; i++)
        {
            if (favorites[i] == $(this)) found = true;
        }
        if (!found) favorites.push($(this).clone())

        $('.favorite').append(favorites);
    });


});

【讨论】：

问题是，favorites[i] 永远不会等于$(this)，因为它们是两个不同的元素，即使它们具有相同的内容/属性。 var a = {}; var b = {}; console.log(a == b); // false
你是什么意思，为什么它们会不同？
查看我更新的评论，两个不同的对象永远不会相等。 .clone() 创建一个新元素，从而创建一个新的 (jQuery) 对象

【解决方案5】：

为已推送的项目添加一个类，然后进行基本检查：而不是：

favorites.push($(this).clone())

你可以这样做：

if( !$(this).hasClass("pushed") ) {
    favorites.push( $(this).addClass("pushed").clone() );
}

【讨论】：

你也可以$(this).not('.pushed')。
@JaredFarrish 是的，它也更具可读性，但我倾向于不使用过滤器，因为它们是 slower。
确实如此。在大量的 DOM class-name 测试列表中，你肯定有道理。

【解决方案6】：

只需推送元素本身而不是克隆它：

favorites.push($(this))

额外的好处是它为用户提供了该项目已被添加的线索。

现场演示：http://jsfiddle.net/9Dmcg/6/

【讨论】：

【解决方案7】：

您似乎在寻找Array.indexOf。它返回数组中值的索引。如果没有找到则返回 -1。

这是一个新的数组方法，所以你需要一个 polyfill 才能在旧浏览器上工作。

$(document).ready(function(){

    var favorites = [];
    var counter = 0;

    $('.containers').on('click', function(){
        var clone = $(this).clone(); // caching element

        if (favorites.indexOf(clone) !== -1) {
            favorites.push(clone);
        }

        $('.favorite').append(favorites);
    });
});

【讨论】：