创建一个从表单输入多维关联数组

Question

什么是创建一个从形式输入的多维关联数组的最佳方式？

形式看起来像这样：

<div id="items"> 
    <h4>Engraving Text</h4> 
    <div class="item" data-position="1"> 
     <h4 id="engraving-item">Item 1</h4> 
     <label>Engraving Line 1: </label> 
     <input type="text" class="engraving-input engraving-line1" name="trophy" id="item1-line1"> 
     <br /> 
     <label>Engraving Line 2: </label> 
     <input type="text" class="engraving-input engraving-line2" name="trophy" id="item1-line2"> 
     <br /> 
     <label>Engraving Line 3: </label> 
     <input type="text" class="engraving-input engraving-line3" name="trophy" id="item1-line3"> 
     <br /> 
    </div> 
</div> 

如果用户输入他们想要多个项目 - 使用这些第一3作为模板的其他输入动态添加到形式。

我期待创造这种阵列（例如，如果用户增加2项）：

​​

我写了这一点，但我想我与它或走错方向至少 - 写得不好。

var totalItems = $("#quantity_wanted").val(); 

jsonObj = []; 

i=1; 

while (i < totalItems){ 
items = {}; 
$('.item[data-position="'+i+'"] :input').each(function(){ 
    var name = $(this).attr("name"); 
    var engraving = $(this).val(); 
    item = {} 
    item ["name"] = name; 
    item ["engraving"] = engraving; 
    items.push(item);  
}); 

jsonObj.push(items) 
i++;  
} 

只是寻求帮助编写的代码，这将有助于我通过在屏幕上输入迭代，并将其推入一个多维关联数组像我列出。

Answer 1

你的代码可以大大简化。在jQuery选择

1. data-position属性，因为你不实际使用的价值没有意义 。你只需要通过他们的共享类（.item）选择所有 输入组容器，那么，对于 每个容器，选择所有后代的投入。
2. 您的代码构建item元素是多余的。您可以使用内联 对象文字/初始值设定项（{...}）代替。

此外，如@Andy指出，items阵列应当由数组文本（[]）初始化，不反对（{}）。

因此，代码应该是这样的：

var jsonObj = []; 
$('div.item').each(function(){ 
    var items = []; 
    $(this).find('input').each(function() { 
     items.push({ 
      name: $(this).attr("name"), engraving: $(this).val() 
     });  
    }); 
    jsonObj.push(items) 
});