JQuery толкать текст в массив

Question

Я просто пытаюсь нажать на текст li элемент, когда я нажимаю кнопку добавления. Но когда я нажимаю кнопку "Добавить", она помещает все элементы в моем списке в массив. Я думаю, это потому, что я просто использую класс. Как лучше всего обойти это? Заранее спасибо!

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

Answer 1

$(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);
    });
});

Answer 2

Как насчет этого:

$(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);
    });
});

В основном вы хотите найти ближайший li вложение вашего .target (тот, который был нажат), а затем найти абзац, содержащийся в этом li,

Answer 3

Ваш код JavaScript по сути говорит:

Когда щелкает элемент класса "target", вставьте КАЖДЫЙ текст элементов абзаца в массив.

Попробуйте заменить это:

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

с:

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

Вместо этого будет добавлено текстовое значение только из элемента абзаца, который непосредственно предшествует кнопке, на которую нажал пользователь.