javascript - 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>

如何将每个 div 中的字段名称和值组合到各自的 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>