无法将数据正确附加到JS数组变量 - unable to append data properly to a JS array variable

在像这样的表单元素中的div中有两个输入字段

<form>
<div id="si-goal-section">
    <div class="si-goal-container">
        <input type="text" class="si-input goal-icon" name="goal-icon">
        <input type="text" class="si-input goal-title" name="goal-title">
    </div>
</div>
<div>
    <button type="button" id="goal-btn">Add goal</button>
</div>
</form>

当我点击"添加目标"按钮时，我会添加一个新的"si目标容器"div。这是的脚本

$('form #goal-btn').click(function() {
    $('form #si-goal-section').append('<div class="si-goal-container"><input type="text" class="si-input goal-icon" name="goal-icon"><input type="text" class="si-input goal-title" name="goal-title"></div>')
})

然后，我在JS中创建一个数组变量，并收集表单数据并将其传递给它，就像这个一样

var data_to_send = []
$('form').find('.si-input').each(function() {
    if($(this).hasClass('goal-icon')) {
       data_to_send[$(this).attr('name')] = $(this).val() 
    }
    if($(this).hasClass('goal-title')) {
       data_to_send[$(this).attr('name')] = $(this).val() 
    }
})

因此，这种方法将不起作用，因为名称字段是相同的，并且值只是被重写了。这里还可以做些什么，这样我就可以将附加的数据存储在数组中，然后在php端访问它？

我试过这种

var data_to_send = {}
data_to_send.goal = []
$('form').find('.si-input').each(function() {
    if($(this).attr('name') != undefined) {
        data_to_send.goal.push({
            'goalIcon': $(this).find('.goal-icon').val()
            'goalTitle': $(this).find('goal-title').val()
        })
    }
})

但这也没有给我所需的o/p我正在寻找。我需要我的data_to_send数组在ajax调用中看起来像这样。

...
data_to_send['bannerImage']: 
data_to_send['goalName']:
data_to_send['goalIcon'][0]:
data_to_send['goalTitle'][0]:
data_to_send['goalIcon'][1]:
data_to_send['goalTitle'][1]:
...

将字段追加并存储到数组中的正确方法是什么？如果我正在使用serialize（），那么如何仅将其用于特定字段？

给si-goal-section的第一个input elements一个id，如下所示：

<div class="si-goal-container">
    <input type="text" id="goalicon_1" class="si-input goal-icon" name="goal-icon"/>
    <input type="text" id="goaltitle_1" class="si-input goal-title" name="goal-title"/>
</div>

现在，在button的click event上的JS中，从上一个si-goal-section和split中获取标题和图标的id，它基于_，如下所示：

$('form #goal-btn').click(function() {
    var goalIconID=parseInt($(".si-goal-container:last .goal-icon").attr('id').split("_")[1])+1;
    //fetch .goal-icon's and goal-title's id by from last .si-goal-container and add + 1 [increment id]
    var goalTitleID=parseInt($(".si-goal-container:last .goal-title").attr('id').split("_")[1])+1;
    $('form #si-goal-section').append('<div class="si-goal-container"><input type="text" class="si-input goal-icon" id="goalicon_'+goalIconID+'" name="goal-icon"><input type="text" id="goaltitle_'+goalTitleID+'" class="si-input goal-title" name="goal-title"></div>');
    //add id to the newly created elements
})

因此，您现在可以拥有独特的元素，并将其作为values 推送到您的array

DEMO

试试这个：你可以迭代si-goal-containerdiv，然后读取里面的si-input输入字段。将值存储在map中，并将map添加到数组中，如下所示

$(document).ready(function(e) {
    $('form #goal-btn').click(function() {
       $('form #si-goal-section').append('<div class="si-goal-container"><input type="text" class="si-input goal-icon" name="goal-icon"><input type="text" class="si-input goal-title" name="goal-title"></div>')
    });
   $('form #value-goal-btn').click(function() {   
       var data_to_send = new Array();
       $('form').find('div.si-goal-container').each(function() {
           var container_data = {};
           $(this).find('.si-input').each(function(){
              container_data[$(this).attr('name')] = $(this).val();
           });
          data_to_send.push(container_data);
        });
     alert(JSON.stringify(data_to_send));
    });
});

JSFiddle演示