如何避免使用jquery多次將相同的圖像添加到div？

我正在jquery中工作。我已經寫了一個腳本，從第一個div添加圖像到第二個div。但是，我不希望它有可能兩次添加相同的圖像。如何避免使用jquery多次將相同的圖像添加到div？

這裏是第一個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>

下面的代碼是爲第二個div代碼：

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

，這裏是我的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); 
}

添加DIV作品很好，但它允許相同的物品被添加兩次。我該如何阻止這種情況發生？在此先感謝您的幫助。

來源

2013-01-09 Sadda-shutu

很多方法可以做到這一點......你可以添加一個類到<img>已被追加並檢查該類別..使用hasClass。

我這樣做是..創建一個數組..和推src到數組和檢查是否src是數組中存在的或沒有辦法的辦法

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 
    } 
}

來源

2013-01-09 11:30:05 bipen

thnk u代表畝回覆讓我嘗試這 –

thinks bipen其工作很好的代碼非常感謝 –

歡迎...快樂編碼 – bipen

您必須擁有已經存在或已添加的圖像列表，以避免再次添加它們。只需建立一個像列表：

var added_images = [];

，並檢查用一個簡單的列表內圖像存在：

if (added_images.indexOf(src)) { 
    // image already exists 
    } else { 
     // add the image to the list 
     added_images.push(src); 
     // and DOM... 
    }

來源

2013-01-09 11:25:47

if(!$("#productbundles img[src$='" + image_src + "'").length) 
{ 
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); 
}

如果你有SRC的完整路徑

，嘗試用去除$。

來源

2013-01-09 11:29:04

如何避免使用jquery多次將相同的圖像添加到div？

回答

相關問題