jQuery的每個數組索引附加到div

Question

我想追加到另一個div做的數組的值，但是當我追加數組值附加到數組的所有值不只是我已經添加（通過點擊），任何建議將是偉大的，在此先感謝！

HTML

<div id="products"> 
    <ul> 
     <li><p>Lorem 1</p><button class="target">Add</button></li> 
     <li><p>Lorem 2</p><button class="target">Add</button></li> 
    </ul> 
</div> 
<div id="cart"> 
    <ul> 

    </ul> 
</div> 

jQuery的

$(document).ready(function(){ 

    var array = Array(); 

    $(".target").click(function() { 

     array.push($(this).siblings('p').text()); 

     $.each(array, function(index, value) { 

      $("#cart ul").append("<li>"+value+"</li>"); 
     }); 


    }); 
}); 

當我點擊添加上說的第一個按鈕的顯示

的Lorem 1

但是當我再點擊該加顯示第二個按鈕

的Lorem 1 的Lorem 1 的Lorem 2

Answer 1

要添加項目到陣列中，如果你想保持添加的項目的列表，它是有道理的，但你要添加的項目時，循環遍歷數組到列表中，這將使其將所有項目添加到已存在的項目中。

您只需添加的最後一個項目：

array.push($(this).siblings('p').text()); 
$("#cart ul").append("<li>" + array[array.length - 1] + "</li>"); 

，或者你可以添加項目之前清除列表：

array.push($(this).siblings('p').text()); 
$("#cart ul").empty(); 
$.each(array, function(index, value) { 
    $("#cart ul").append("<li>" + value + "</li>"); 
}); 

Answer 2

因爲你環路陣列中的每個元素，讓你得到你所有的元素。 嘗試沒有$ .each你的點擊功能，它會更好。

Answer 3

如果你想點擊選擇$(".target")時只添加一個值，你應該這樣做

// assuming you want the last value in the array. 
    var value = array[array.length-1]; // could also do $(this).siblings('p').text() 
    $("#cart ul").append("<li>"+value+"</li>"); 

好像你甚至不需要你的陣列，（除非它被一些其他功能）。

Answer 4

LIVE DEMO

$(function(){ 

    var array = []; 

    $(".target").click(function() { 

    array.push($(this).siblings('p').text()); 
    $("#cart ul").append("<li>"+ array[array.length -1] +"</li>"); 

    }); 

});