24

我在一个页面上有很多输入。我想使用 jQuery 创建一个包含每个输入的名称和值的关联数组。我试过了：

<input class="activeInput" type="text" name="key1" value="red">
<input class="activeInput" type="text" name="key3" value="France">

inputValues = $('.activeInput').val();

编辑 - 多亏了有见地的评论，似乎创建一个对象是一个更好的方法。关于如何创建对象的任何建议？

4

6 回答 6

55

您可以使用.each()迭代元素并将名称和值添加到地图（普通对象）中，如下所示：

var map = {};
$(".activeInput").each(function() {
    map[$(this).attr("name")] = $(this).val();
});

alert(map.key1); // "red"

看到它在行动。

于 2012-10-23T18:19:48.827 回答
21

要创建一个值数组，您可以这样做：

var $inputValues = $('.activeInput')
  .map((i, el) => el.val())
  .toArray();

要创建具有键和值的对象，您可以执行以下操作：

var data = $('.activeInput')
  .toArray()
  .reduce((accumulator, element) => {
    accumulator[element.name] = element.value;
    return accumulator;
  }, {});
于 2016-08-18T12:43:08.187 回答
6

通过循环运行它们，您可以创建具有字符串可访问值的对象。Javascript 没有关联数组的概念，但是使用括号语法，您可以访问对象的属性，其方式与 PHP 中关联数组的工作方式非常相似。

var values = {};
$('.activeInput').each(function() {
    values[this.name] = this.value;
});

console.log(values['key1'], values['key3']);
// Note, this is the same as above.
console.log(values.key1, values.key3);

在您的控制台中，您应该看到： red France

这是一个JsFiddle http://jsfiddle.net/rEtVt/。

这也称为用于快速查找的哈希图（概念）。

于 2012-10-23T18:28:13.727 回答
2 
var inputValues = new Array();
$('input').each(function(){
    inputValues[$(this).attr('name')] = $(this).val();
});

当然，这是假设您想要所有输入的值。

话虽如此，许多不使用 Array 的原因已经引起了我的注意。

于 2012-10-23T18:19:30.217 回答
1

如果您需要序列化表单以进行 ajax 提交，那么您应该看看serialize和serializeArray jQuery 方法。当您有许多具有相同name属性的输入必须在服务器上创建数组时，可能会发生特殊情况。

否则，我会serializeArray在表单元素上调用 jquery 并迭代其结果以将其转换为对象。

UPD：添加示例http://jsfiddle.net/zQNUW/

于 2012-10-23T20:02:27.337 回答
-1

试试这个：

var values = new Object() // creates a new instance of an object
$('.activeInput').each(function() {
    values[$(this).attr('name')] = $(this).val()
})

检查对象属性：

output = ""
for (property in values) {
  output += property + ': ' + values[property]+'; ';
}
alert(output)
于 2012-10-23T18:18:12.627 回答