根据元素的数量附加到数组

这是我目前的代码：

      $(function() { $("#submitBtn").on("click", submitted); $(".add-row-btn").on("click", function(evt) { evt.preventDefault(); evt.stopPropagation(); $(".container").append(createNewRow()); }) $(".remove-row-btn").on("click", function(evt) { evt.preventDefault(); evt.stopPropagation(); $(".container div").eq($(".container div").length - 1).remove(); }) $('#amount').on('change', function() { var containerEl = $(".container"); containerEl.empty(); var startingNumberOfLines = parseInt($("#amount").val()); for (var i = 0; i < startingNumberOfLines; i++) { $(".container").append(createNewRow()); } }); $(".add-row-btn").trigger("click"); }) var createNewRow = function() { var lineTitleEl = $("").attr("placeholder", "enter text here") .addClass("line-title"); var labelEl = $(""); var inputEl = $("").attr("step", "0.05").attr("type", "number") .addClass("line-number"); var firstNumberEl = labelEl.clone(); firstNumberEl.text("posx: ").attr("class", "first-number-el").append(inputEl.clone()); var secondNumberEl = labelEl.clone(); secondNumberEl.text("poxy: ").attr("class", "second-number-el").append(inputEl.clone()); var newRowEl = $("
").append(lineTitleEl, firstNumberEl, secondNumberEl); return newRowEl; } function submitted() { console.log("submitted"); $(".container").children("div").each(function() { var title = $(this).find(".line-title").val(); var firstNum = $(this).find(".first-number-el input").val(); var secondNum = $(this).find(".second-number-el input").val(); console.log('your array is: [{"posx":'+ firstNum + ',"posy":' + secondNum+',"text":"'+ title +'"}]'); }) }   .line-title { width: 259px; margin: 0px; height: 15px; clear: left; } .line-number { width: 45px; } .container { margin: 10px; }       
 
 <!--
enter amount of text + number boxes:  
--> 
Add row Remove row  
 
   

当只有一行时，代码正常工作，因为数组是以我想要的格式输出的。 但是，当有多行时，它会使用不同的变量再次输出相同的行。

我希望它看起来像这样：

例如，如果这是输入

我希望输出看起来像这样：

submitted your array is: [{"posx":1,"posy":-1,"text":"test1"},{"posx":-0.1,"posy":0.05,"text":"test2"}]

另一个例子，如果有3行像这样

我希望输出看起来像这样：

submitted your array is: [{"posx":1,"posy":-1,"text":"test1"},{"posx":-0.1,"posy":0.05,"text":"test2"},{"posx":-0.3,"posy":0.25,"text":"test3"}]

如何根据行数使输出看起来像这样？

非常感谢所有帮助，谢谢。

Answer 1

在打印之前，您需要将输出保存到数组中。 见下文。

           
 
  
Add row Remove row  
 
   

Answer 2

与@zatopeks类似，但我有点迟了……

           
 
  
Add row Remove row  
 
   

Answer 3

使用map()为每行创建一个对象数组。

向行添加一些类以使它们易于隔离，然后映射每一行

 const data = $('.input-row').map(function() { const $row = $(this) return { posx: $row.find('.pos-x').val(), posy: $row.find('.pos-y').val(), text: $row.find('.line-title').val() }; }).get() console.log(data) 

 .as-console-wrapper { max-height: 100%!important;} 

Answer 4

仔细查看提交的（）中发生的事情。 在每个循环上打印该行。 你想要的是提前打印手续，然后在循环期间只打印{}对象。

这样的事情，可能是：

           
 
  
Add row Remove row