javascript - 分别读取div中包含的输入值

Question

我的 html 看起来像这样:

<div id="Section1" class="divFiles">

<input type="text" name="file">

<input type="text" name="file">

<input type="text" name="file">

<input type="text" name="file">

</div>

  <div id="Section2" class="divFiles">      

<input type="text" name="file">

<input type="text" name="file">

<input type="text" name="file">

<input type="text" name="file">

</div>

我想生成一个具有两个属性的对象列表:key和listTitles，key只是div的id， listTitles 是input 字段上每个值的列表。我单独检索每个 div 的 id 没有任何问题，但我不确定哪种方法是 div 读取其子 inputs 中包含的所有值的正确方法。 我的目标是得到这样的结果:

{key: Section1, listTitles: inputValue1Div1, inputValue2Div1, inputValue2Div1, inputValue2Div1 },
{key: Section2, listTitles: inputValue1Div2, inputValue2Div2, inputValue2Div2, inputValue2Div2 }

我使用的代码仅检索 div id，问题是用当前 div 的输入值字段填充 listTitles 属性。我需要改变什么？

    var divElements = $(".divFiles");
    var tests = [];
     $.each(divElements, function () {           
     tests.push({ 'key': $(this).attr('id'), 'listTitles':$.each(JSON.parse($(this).children("input[name=file]").val()))});
     })

Answer 1

你快明白了。请改用 .map().get()。

var divElements = $(".divFiles");
var tests = [];

$.each(divElements, function() {
  tests.push({
    'key': $(this).attr('id'),
    'listTitles': $(this).children("input[name=file]").map(function(i, elem) {
      return this.value;
    }).get()
  });
})

console.log(tests);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="Section1" class="divFiles">
  <input type="text" name="file" value="a">
  <input type="text" name="file" value="b">
  <input type="text" name="file" value="c">
  <input type="text" name="file" value="d">
</div>

<div id="Section2" class="divFiles">
  <input type="text" name="file" value="e">
  <input type="text" name="file" value="f">
  <input type="text" name="file" value="g">
  <input type="text" name="file" value="h">
</div>