admin管理员组文章数量:1418017
I'm trying to append the values of array I've made into another div but when I append the array value its appending all the values of the array not just the one I've added(by click), any suggestions would be great, thanks in advance!
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>");
});
});
});
When I click Add on say the first button its displays
Lorem 1
but when I then click the add on the second button it displays
Lorem 1 Lorem 1 Lorem 2
I'm trying to append the values of array I've made into another div but when I append the array value its appending all the values of the array not just the one I've added(by click), any suggestions would be great, thanks in advance!
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>");
});
});
});
When I click Add on say the first button its displays
Lorem 1
but when I then click the add on the second button it displays
Lorem 1 Lorem 1 Lorem 2
Share Improve this question edited Mar 25, 2013 at 17:17 Rob 4,94712 gold badges52 silver badges56 bronze badges asked Mar 25, 2013 at 16:33 user2201765user2201765 1,0436 gold badges18 silver badges21 bronze badges 04 Answers
Reset to default 1You are adding the items to the array, which makes sense if you want to keep a list of added items, but then you are looping through the array when adding items to the list, which will make it add all items to the items already existing there.
You can just add the last item:
array.push($(this).siblings('p').text());
$("#cart ul").append("<li>" + array[array.length - 1] + "</li>");
or you can clear the list before adding the items:
array.push($(this).siblings('p').text());
$("#cart ul").empty();
$.each(array, function(index, value) {
$("#cart ul").append("<li>" + value + "</li>");
});
Because you loop on each element of the array, so you get all your elements. Try without the $.each in your click function, it will be better.
If you want to only add one value when the selector $(".target") is clicked, you should do something like
// 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>");
It seems like you might not even need your array, (unless it is being used by some other functions as well).
LIVE DEMO
$(function(){
var array = [];
$(".target").click(function() {
array.push( $(this).siblings('p').text() );
$("#cart ul").append("<li>"+ array[array.length -1] +"</li>");
});
});
本文标签： javascriptjQuery each array index append to divStack Overflow
版权声明：本文标题：javascript - jQuery each array index append to div - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745283544a2651568.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论