Question

I am working in jquery.
I have written a script which adds an image from a first div to a second div.
However, I don’t want it to be possible to add the same image twice.

Here is the code for the first div

<div><span class="span1">
<img width="30" hieght="30" name="productimage" src="http://panther:805/Computers.jpg"></span>
<span class="span1">Black_xxl_Slim</span>
<span class="span1">1</span>
<a class="pull-right" href="#"><i onclick="Add(this)" class="icon-plus"></i></a>
</div>

Here is the code for the second div:

<div class="span6" id="separat">
            <ul class="thumbnails pre-scrollable" id="productbundles">
            </ul>
        </div>

here is my jquery

function Add(obj) {
    var img = $(obj).closest('div').find('img').first();

    var image_src = $(img).attr('src');
    var newobj = $('<li class="span2" id="bunle' + id++ + '"><a href="javascript: void(0)"><img hieght=30  width=30 src="' + image_src + '" /></a><h5>'+"Name:" + name + '</h5><span id="pric' + id + '"><b>'+ "Price:"+ price + '</b></span>');
    $('#productbundles').append(newobj);
}

Adding the div works fine, but it allows the same item to be added twice.
How can I stop this from happening?
Thanks in advance for your help.

Answer 1

many ways to do this… you can add a class to the <img> which has been appended and check for that class..using hasClass.

the way i am doing it is.. creating an array.. and pushing the src into the array and checking if the src is present in the array or not

function Add(obj) {
  var addedImagesArray=[];
  var img = $(obj).closest('div').find('img').first();

   var image_src = $(img).attr('src');
   var newobj = $('<li class="span2" id="bunle' + id++ + '"><a href="javascript: void(0)"><img hieght=30  width=30 src="' + image_src + '" /></a><h5>'+"Name:" + name + '</h5><span id="pric' + id + '"><b>'+ "Price:"+ price + '</b></span>');
   if (addedImagesArray.indexOf(image_src)) {
       alert("Image Already Added");//src present in the array so do nothing or show an alert..
   } else{
       $('#productbundles').append(newobj); //append the image
       addedImagesArray.push(image_src); ///add src to array
   }
}