Javascript 在console.log中打印动态DOM数据

我的目标是从所有textarea框（由用户添加）中获取数据，并将其保存到console.log。对于我当前的代码，它只从第一个框中获取

HTML

点击+添加更多字段
拯救

JS:

$（'#addBtn'）。单击（函数（）{
var addField=$（“
”）；
$（'#afield'）。追加（addField）；
});
$（'.addSubmit'）。单击（函数（e）{
e、 预防默认值（）；
var data=$（'#testID'）.map（函数（）{
返回{
地址：$（this）.closest（'form'）.find（'[name=“nameField”]'）.val（）
};
}).get（）；
var jsonString=JSON.stringify（数据）；
log（jsonString）；
});

如果您复制的是

id

，那么它将无法工作

var addField = $('<div id="afield"><textarea
//-------------------------^^^^^^

并使用

$（“#formId”）.serialize（）获取输出。我可以给你看一个简单的例子：


$（函数（）{
$（“.add”）。单击（函数（）{
$（本）。在（''）之前；
返回false；
});
$（“.show”）。单击（函数（）{
警报（$（“表单”）.serialize（））；
返回false；
});
});
*{font-family:Segoe-UI；}
text区域{显示：块；调整大小：无；宽度：200px；高度：100px；边距：0 5px；}

添加
显示

只能返回第一个值

您可以改为使用此选项：

var address = []
$(this).closest('form').find('[name="nameField"]').each(function(i,v){
    address.push($(v).val());
});
return {Address: address}

或者试试这个：

  $('.addSubmit').click(function(e){
            e.preventDefault();
    var address = []
    $(this).closest('form').find('[name="nameField"]').each(function(i,v){
        address.push($(v).val());
    });
    var data = {Address: address}
    var jsonString = JSON.stringify(data);
    console.log(jsonString);
  });

谢谢你的超快速回复。我做了你推荐的所有更改。将
ID更改为Class
；使用
[]
；已使用
serialize（）
。也正在提取输出，但出现了两个问题。1） 当我现在点击add按钮时，文本区域框的数量增加了一倍。1 > 2 >4 >8. 它应该只添加1。2） serialize（）还输出“name”。如果我只想要一个值，这样我就可以用它创建一个JSON呢？怎么做？另外，我也没有完全理解添加
[]
的目的。如果你能解释或指向一些资源。非常感谢。@SujayKirti 1。天啊。。。双打？你是克隆人吗？那不是正确的方法。2. <代码>[]
创建一个值数组。最初，它并没有加倍，但在我将ID更改为您指出的类之后，它的行为就是这样的。但我没有使用clone（）。你可以在OP中查看代码。不管怎样，做这件事的最佳实践是什么？完成了，伙计。现在请帮助我获得正确的输出。感谢您必须获取在这些框中输入的console.log中的值，最好是JSON中的值，尽管不是强制性的。仅限值，而不是serialize（）附带的名称；在你的代码之后，但它没有打印任何东西。我只是一个初学者，所以只是在学习。这应该适用于问题中发布的代码，而不是在根据praveen的回答进行任何更改之后。您需要替换：
返回{Address:$（this）.closest（'form'）.find（'[name=“nameField”]'）.val（）从您的代码和给定的代码。您可以在返回语句之前使用console.log。您就是那个人！它完全符合我的要求。非常感谢兄弟。现在我最好去理解它背后的逻辑。再次感谢。：）@萨钦：如果你能直接在答案中编辑澄清，而不是在评论中，那就太好了。这将改善你的答案，因为它变得更容易理解。我从你的元帖子中得到了这个答案。既然答案似乎解决了OP的问题，你能通过解释OP的方法不起作用的原因和你的方法起作用的原因来扩展这个答案吗？（例如，尝试提供官方参考/文件，以帮助未来的读者）。谢谢。如果你仔细想想，答案通常不应该以“或”开头。@Jean FrançoisCorbett“我不知道”怎么样？人们在日常生活中经常使用这些。这是一个答案。@andrew-t，jean-françois corbett:这不是这里提到的答案。这是我的另一个答案。为了进一步澄清，我添加了这个答案，因为OP无法理解我之前的问题，在评论部分添加的代码也不太容易理解。我明白我应该编辑我的答案，以便进行任何澄清，并将从下次开始这样做。现在因为op已经接受了它，我想我不应该再编辑它了。。。
<textarea name="address[]"> <!-- note the [] -->

$(this).closest('form').find('[name="nameField"]').val()

var address = []
$(this).closest('form').find('[name="nameField"]').each(function(i,v){
    address.push($(v).val());
});
return {Address: address}

  $('.addSubmit').click(function(e){
            e.preventDefault();
    var address = []
    $(this).closest('form').find('[name="nameField"]').each(function(i,v){
        address.push($(v).val());
    });
    var data = {Address: address}
    var jsonString = JSON.stringify(data);
    console.log(jsonString);
  });