Do not allow duplicate elements to be inserted into the array

Question

I basically push the containers into an array, and as soon as one of them has been pressed, I do not want the same one to be pressed again.

Here is my 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); }); }); 

I need to find a way around this.

Answer 1

If this event is no longer used for this event, you can use the .one() method instead of .on to get this functionality.

 $(document).ready(function(){ var favorites = []; var counter = 0; $('.containers').one('click', function(){ favorites.push($(this).clone()) $('.favorite').append(favorites); }); }); 

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

Even if there were more, you could use .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/

Answer 2

Try checking the item id, I would say. Something like that:

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

And here is a working example -> http://jsfiddle.net/9Dmcg/7/

M.Z.

Answer 3

You can check if an element exists:

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

Answer 4

Add a class to the elements that were clicked, and then do a basic check: Instead:

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

You can do:

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

Answer 5

Just click on the element itself, not clone it:

 favorites.push($(this)) 

An added benefit is that it makes it clear to the user that the item has already been added.

Live demo: http://jsfiddle.net/9Dmcg/6/

Answer 6

It seems that you are looking for Array.indexOf . It returns the index of the value in the array. Returns -1 if not found.

This is a new array method, so you will need a polyfill to make it work in older browsers.

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

Answer 7

This can be done using the JS proxy ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy )

Below is the code to create an array that will not accept a duplication record

 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 

In the above code, we modify the default behavior for the array, since the set method will be called upon any modification made to the array.