正在数组中存储键值对

Question

这是我的html输入元素

<div class="form-group">
  <div class="col-lg-6">
     <input type="text" name="Key" class="form-control" placeholder="Key">
  </div>
  <div class="col-lg-6">
    <input type="text" name="Value" class="form-control" placeholder="Value"/>
  </div>
</div>
<div class="form-group">
  <div class="col-lg-6">
     <input type="text" name="Key" class="form-control" placeholder="Key">
  </div>
  <div class="col-lg-6">
    <input type="text" name="Value" class="form-control" placeholder="Value"/>
  </div>
</div>

如何使用Jquery获取所有"Key"one_answers"Value"对并将它们保存到数组中？像这个result =[ {'Key' : 'Value'}, {'Key' : 'Value'} ];

Answer 1

我自己也在学习javascript和jQuery，但由于您还没有展示任何具体的尝试和获得解决方案，我可以描述如何实现我认为您想要的目标。我是根据我在jQuery中已经看到的内容进行工作的，与访问这个网站的很多人相比，这并不算多，我在谷歌上搜索了自己以确认一些事情。也就是说，下面是我认为我如何才能达到你想要的结果的描述。

下面是一个文本示例，帮助您完成示例。由于div中的每对输入都具有一致的类名，因此可以使用$(".form-group")查找该类的所有元素。一旦你有了成对的数组，你就可以把事情提升到下一个层次。接下来，您可以使用jQuery的each()函数来迭代数组的内容。对于数组的每个元素，您可以使用find（）函数来查找名称为"Key"one_answers"Value"的输入。这时，您可以填充JSON数组。

Answer 2

我给你做了一把基本的小提琴；

因此，基本上使用jQuery的each()函数，您可以循环遍历表单组，获取键和值，并将它们推送到数组中。

//defining your empty array here
var arr = [];
//setting up the click function to return your array in console.
$('.cnsllog').on('click', function() {
  //go through all the form groups
  $('.form-group').each(function() {
    //set the input with name equal to value as value variable
    value = $(this).find("input[name='Value']").val()
      //set the input with name equal to Keyas value Key
    key = $(this).find("input[name='Key']").val()
      //push these two variables to your array
    arr.push({
      key: key,
      value: value
    })
  });
  console.log(arr)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="form-group">
  <div class="col-lg-6">
    <input type="text" name="Key" class="form-control" placeholder="Key">
  </div>
  <div class="col-lg-6">
    <input type="text" name="Value" class="form-control" placeholder="Value" />
  </div>
</div>
<div class="form-group">
  <div class="col-lg-6">
    <input type="text" name="Key" class="form-control" placeholder="Key">
  </div>
  <div class="col-lg-6">
    <input type="text" name="Value" class="form-control" placeholder="Value" />
  </div>
</div>
<button class="cnsllog">put the array in console</button>