将键值对存储在数组中

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 将它们保存到数组？ 像这样的result =[ {'Key' : 'Value'}, {'Key' : 'Value'} ];

Answer 1

我自己正在学习 javascript 和 jQuery，但是由于您还没有展示任何具体的尝试并获得解决方案，我可以描述如何去做我认为您想做的事情。 我的工作基于我已经在 jQuery 中看到的内容，与访问该站点的很多人相比并不多，并且我自己做了一些谷歌搜索以确认一些事情。 也就是说，这里是我认为如何达到您想要的结果的描述。

这是一个文本示例，可帮助您完成示例。 由于您在 div 中的每对输入都具有一致的类名，因此您可以使用$(".form-group")查找该类的所有元素。 一旦你有了你的配对数组，你就可以将事情提升到一个新的水平。 接下来，您可以使用 jQuery 的each()函数来迭代数组的内容。 对于数组的每个元素，您可以使用 find() 函数查找名称为“Key”和“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>