JQuery：將字段名稱和值的集合組合到一個對象中，然後推入一個數組中

Question

我有一個包含三組字段的表單。

像這樣：

<form> 
 
    <div class="food"> 
 
     <input type="text" name="" value="" /> 
 
     <input type="text" name="" value="" /> 
 
     <textarea name="" value=""></textarea> 
 
    </div> 
 

 
    <div class="drinks"> 
 
     <input type="text" name="" value="" /> 
 
     <input type="text" name="" value="" /> 
 
     <textarea name="" value=""></textarea> 
 
    </div> 
 

 
    <div class="gifts"> 
 
     <input type="text" name="" value="" /> 
 
     <input type="text" name="" value="" /> 
 
     <textarea name="" value=""></textarea> 
 
    </div> 
 
    </form>

如何合併字段名和值在每個格到自己的JSON對象，該對象推到一個數組，然後添加數組提交之前隱藏的輸入字段？

Answer 1

您可以使用map()和get()創建數組，並在裏面您可以返回每個div的對象。

var data = $('form > div').map(function() { 
 
    var obj = {} 
 
    $(this).find('input, textarea').each(function() { 
 
    obj[$(this).attr('name')] = $(this).attr('value'); 
 
    }) 
 
    return obj; 
 
}).get() 
 

 
console.log(data)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="food"> 
 
    <input type="text" name="a" value="1" /> 
 
    <input type="text" name="b" value="11" /> 
 
    <textarea name="c" value="111"></textarea> 
 
    </div> 
 

 
    <div class="drinks"> 
 
    <input type="text" name="a" value="2" /> 
 
    <input type="text" name="b" value="22" /> 
 
    <textarea name="c" value="222"></textarea> 
 
    </div> 
 

 
    <div class="gifts"> 
 
    <input type="text" name="a" value="3" /> 
 
    <input type="text" name="b" value="33" /> 
 
    <textarea name="c" value="333"></textarea> 
 
    </div> 
 
</form>