JQuery：フィールド名と値のセットをオブジェクトに結合して配列にプッシュ

Question

私は3つのフィールドセットを持つフォームを持っています。このよう

：

<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オブジェクトにそれぞれのdiv内のフィールド名と値を組み合わせた配列にオブジェクトをプッシュし、その後に配列を追加しません送信前に隠れた入力フィールド？

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>