jQuery将文本推送到数组答案

【问题标题】：jQuery push text to arrayjQuery将文本推送到数组
【发布时间】：2013-03-15 04:08:42
【问题描述】：

我只是想在单击添加按钮时推送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);
    });
});

【问题讨论】：

$('p') 选择所有 p 元素。您只想选择点击元素之前的那个。 .prev
您希望能够多次添加它吗？

标签： jquery html arrays push

【解决方案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);
    });
});

基本上你想找到最接近你的.target（被点击的那个）的li，然后找到包含在li中的段落。

【讨论】：

感谢@kgr，这正是我一直在寻找的，非常感谢！
.prev() 可能比最接近/在此处查找更合适。
@Mark 是对的，prev 或 siblings 可能会更好（更简单），但我的意思是展示使用 this 并从中遍历 DOM 的想法。

【解决方案2】：

您的 javascript 代码基本上是这样说的：

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

考虑替换这个：

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

与：

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

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

【讨论】：

【解决方案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);
    });
});

【讨论】：

我认为不会，$(this) 将是按钮，而不是 li。
按钮没有任何子 p 元素。