jQuery push text to array

Question

I'm simply just trying to push the text of an li element when I click the add button. But when I click my add button, it is pushing all the items in my list to the array. I guess it's because I'm just using a class. What would be the best way around this? 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>

jQuery

$(document).ready(function(){
    var array = Array();
    $(".target").click(function() {
        $('p').each(function (i, e) {
              array.push($(e).text());  
        });
        console.log(array);
    });
});

$('p') selects all p elements. You want to select only the one that came before the clicked element. .prev — user400654
– user400654, Commented Mar 25, 2013 at 15:40

Jonny Sooter · Accepted Answer · 2013-03-25 15:50:25Z

3

How about this:

$(document).ready(function(){

    var array = []; //Use the bracket notation instead.

    $(".target").click(function(e) {
        var p = $(this).closest('li').find('p');
        array.push(p.text());

        console.log(array);
    });
});

Basically you want to find the closest li enclosing your .target (the one which was clicked) and then find the paragraph contained in that li.

edited Mar 25, 2013 at 15:50

Jonny Sooter

2,4271 gold badge24 silver badges40 bronze badges

answered Mar 25, 2013 at 15:39

kgr

10k2 gold badges41 silver badges44 bronze badges

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

3 Comments

user2201765 Over a year ago

Thanks @kgr , that's exactly what I've been looking for, thank you very much!

mpen Over a year ago

.prev() may be more appropriate than closest/find here.

kgr Over a year ago

@Mark is right, prev or siblings might be better (simpler) but I meant to show the idea of using this and traversing DOM from that.

Jonny Sooter · Accepted Answer · 2013-03-25 15:41:29Z

0

$(document).ready(function(){

    var array = [];

    $(".target").click(function() {
        array.push($(this).siblings('p').text()); //Replace with this and it will get the text from clicked li only.
        console.log(array);
    });
});

answered Mar 25, 2013 at 15:41

Jonny Sooter

2,4271 gold badge24 silver badges40 bronze badges

2 Comments

kgr Over a year ago

I don't think it will, $(this) will be the button, not the li.

user400654 Over a year ago

the button doesn't have any child p elements.

bwright · Accepted Answer · 2013-03-25 15:45:19Z

0

Your javascript code essentially says:

When an element of the class "target" is clicked, push EACH of the paragraph elements text to the array.

Consider replacing this:

$('p').each(function (i, e) {
    array.push($(e).text());    
});

with:

array.push($(this).previousSibling.text());

This will instead add the text value only from the paragraph element which immediately preceded the button that the user clicked.

answered Mar 25, 2013 at 15:45

bwright

3472 silver badges15 bronze badges

Collectives™ on Stack Overflow

jQuery push text to array

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related