Question

我想阅读所有页面输入ID和值进入对象并将其传递给通过它们循环并提取id和值的函数。

我开始时：

function send()
{
var data = [];
var inputs = $(":text");
for (var i = 0, l = inputs.length; i < l; i++) {
   var input;
   input.id = inputs[i].attr("id");
   input.text = inputs[i].val();
   data[i] = input;
}
receive(data);
}

function receive(data)
{
    for (var input in data) {
        alert(input.id);
        alert(input.text);        
    }
}

为什么这不起作用？

Answer 1

如果您为input元素添加name属性，则可以执行此操作...

var data = $(":text").serializeArray();

...导致此数据结构（取自docs） ......

[
  {
    name: "a",
    value: "1"
  },
  {
    name: "b",
    value: "2"
  },
  {
    name: "c",
    value: "3"
  },
  {
    name: "d",
    value: "4"
  },
  {
    name: "e",
    value: "5"
  }
]

Answer 2

要将项目添加到数组，您可能希望使用.push()而不是通过数字索引访问它。此外，jQuery提供了.each来迭代一个集合。

var data = [];
$(':input:not(:button)').each(function() {
   data.push({
      id: this.id,
      text: $(this).val()
   });
});

还有一件事。 jQuery确实包含一个.map函数，该函数返回一个给定集合“映射”的数组，可以将上面的代码缩短为......

var data = $(':input:not(:button)').map(function() {
    return { id: this.id, text: $(this).val() };
});

Answer 3

使用jquery的serializeArray函数

HTML：

<form id="test">
    <input type="hidden" name="a1" value="test" />
    <input type="text" name="a2" value="test2" />
    <input type="text" name="a3" value="test2" />
    <input type="text" name="a4" value="test2" />
</form>

JS：

function getData(){
    var data = $("#test").serializeArray();
    for(var i in data){
       alert(data[i].name+":"+data[i].value);   
    }
}

jsFiddle示例： http://jsfiddle.net/k2Dd4/

Answer 4

我不确定jQuery中的确切实现，但在Javascript中我会这样做

var inputs = document.getElementsByTagName("input");
var textelems;

for (var i=0;i<inputs.length;i++) {
    if (inputs[i].type == "text") {
        tempElem = [];
        tempElem['id'] = inputs[i].id;
        tempElem['value'] = inputs[i].value;
        textelems.push(tempElem);
    }
}

这会给你一个2D数组（tempElems），其中每个索引都是一个文本框，它有自己的id和value索引。

Answer 5

正确的代码如下：

function send()
{
var data = [];
var inputs = $(":text");
for (var i = 0, l = inputs.length; i < l; i++) {
    var input = {};
    input.id = $("#" + inputs[i].id).attr("id");
    input.text = $("#" + inputs[i].id).val();            
    data[i] = input;
}
receive(data);
}

function receive(data)
{
    for (var i = 0, l = data.length; i < l; i++) {
       alert(data[i].id);
       alert(data[i].text);
    }
}

热门使用jQuery将html输入属性映射到对象？

5 个答案: