jQuery each array index append to div

Question

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

Guffa · Accepted Answer · 2013-03-25 16:40:23Z

1

You 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>");
});

answered Mar 25, 2013 at 16:40

Guffa

703k111 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2201765 Over a year ago

Thanks @Guffa that makes sense, the [array.length - 1] is what I needed, thanks for you think and the well written explanation! Cheers

Vincent Decaux · Accepted Answer · 2013-03-25 16:35:49Z

0

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.

answered Mar 25, 2013 at 16:35

Vincent Decaux

10.9k7 gold badges67 silver badges102 bronze badges

1 Comment

user2201765 Over a year ago

That makes sense but how would I get the value of my array then?

RestingRobot · Accepted Answer · 2013-03-25 16:50:40Z

0

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).

edited Mar 25, 2013 at 16:50

answered Mar 25, 2013 at 16:36

RestingRobot

2,9881 gold badge25 silver badges36 bronze badges

Comments

Roko C. Buljan · Accepted Answer · 2013-03-25 16:52:06Z

0

LIVE DEMO

$(function(){

  var array = [];

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

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

  });

});

edited Mar 25, 2013 at 16:52

answered Mar 25, 2013 at 16:37

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

3 Comments

RestingRobot Over a year ago

Do you really want to re-add all of the items that are already in the list? If he is just adding one item per click, this function removes and adds the same list subset over and over.

RestingRobot Over a year ago

Well, I mean redundant code is redundant no matter how many items are in the list. What if each element requires an AJAX request? There are many cases that could make this operation really expensive. It doesn't appear in this example, but for the sake of everyone else using this as a reference, it would be best not to be inefficient.

Roko C. Buljan Over a year ago

@Jlange you're perfectly right. Edited to reflect your comment

Collectives™ on Stack Overflow

jQuery each array index append to div

4 Answers 4

1 Comment

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related