jquery - 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 = []; //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 2

您的 javascript 代码基本上说：

单击“目标”类的元素时，将每个段落元素文本推送到数组。

考虑替换这个：

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

和：

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

这将改为仅从用户单击的按钮之前的段落元素中添加文本值。

Answer 3

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