創建一個從表單輸入多維關聯數組

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) 
});