Question

考虑以下输入对

<input type="text" class="item_name" value="iphone">
<input type="text" class="item_qty" value="10">

<input type="text" class="item_name" value="macbook">
<input type="text" class="item_qty" value="5">

页面上的输入对数是动态的，而不是固定的。

我希望循环遍历所有对并将值存储为对，以便稍后输出到表中。

我一直试图用jQuery each()来做这件事，但我无法完全弄清楚。

  var detail = [];
  //var detail = {};

   $('input').each(function(index) {
      detail[index] = $(this).val();
      //detail.index = $(this).val();
   });

  console.log(detail);

此输出

["iphone", "10", "macbook", "5"]

这不是我需要的。

我习惯使用PHP，那么JS / jQuery中将输入对存储为多维关联数组/对象的正确方法是什么？

Answer 1

您可以使用类item_name迭代元素，并创建一个对象数组，每个对象都具有name和qty属性。

您可以使用jQuery＆＃39; s .map()：

更轻松地创建此数组

＆＃13;

var details = $('.item_name').map(function() {
  return {
    name: $(this).val(),
    qty: $(this).next('.item_qty').val()
  };
}).get();

console.log(details);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="item_name" value="iphone">
<input type="text" class="item_qty" value="10">

<input type="text" class="item_name" value="macbook">
<input type="text" class="item_qty" value="5">

＆＃13;

Answer 2

＆＃13;

var val = $("input.item_name").map(function(){
obj = {}

obj[$(this).val()] = $(this).next("input.item_qty").val();

return obj;
}).get()

console.log(val)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="item_name" value="iphone">
<input type="text" class="item_qty" value="10">

<input type="text" class="item_name" value="macbook">
<input type="text" class="item_qty" value="5">

＆＃13;

使用.map()

Answer 3

您可以使用递归，Array.prototype.slice()在每个函数调用时对两个<input>元素进行切片，使用键，值对填充对象，直到达到<input> elemnents .length < / p>

＆＃13;

var [obj, n] = [{}, 2];
var inputs = $("input[type=text]");
var res = (function re(i) {
  if (i + n <= inputs.length) {
    var [key, prop] = Array.from(inputs).slice(i, i + n).map(({value}) => value)
    obj[key] = prop;
    i += n;
    return re(i)  
  } else {
    return obj
  }
})(0);
console.log(res)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="item_name" value="iphone">
<input type="text" class="item_qty" value="10">

<input type="text" class="item_name" value="macbook">
<input type="text" class="item_qty" value="5">

＆＃13;

Answer 4

javascript中的关联数组相当于一个对象（都充当字典）

你遇到的问题是你的html将一个键和一个值描述为一个平面列表中的输入，所以当你使用你的JQuery .each（）枚举它们时，你可以将它们全部放回一个列表中。

[key, value, key, value]

你最想要的是一个像这样的对象：

var obj = {
  key: value,
  key: value
}

然后你可以说出“macbook”＆＃39;像这样的财产

obj.macbook或obj['macbook']

您可以通过一次循环两个列表并将它们添加到对象中，或者通过重构html以将键和值输入同时放在另一个元素中来实现这一点。

<div class="item">
 <input type="text" class="item_name" value="iphone">
 <input type="text" class="item_qty" value="10">
</div>
<div class="item">
 <input type="text" class="item_name" value="macbook">
 <input type="text" class="item_qty" value="5">
</div>

然后你可以这样做：

var items = {}
$('.item').each(function(){
 var key = $(this).find('.item_name').val()
 var value = $(this).find('.item_qty').val()
 items[key] = value;
})

如何在JS中存储多组输入值？

4 个答案: