热门的是用jQuery将html输入属性映射到对象

Hot to map html input properties to object with jQuery?

本文关键字：属性 输入 映射 对象 html jQuery 热门      更新时间：2023-09-26

我想读取所有页面输入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);        
    }
}

为什么这不起作用？

如果给input元素一个name属性，就可以这样做。。。

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

这导致了这个数据结构（取自文档）。。。

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

要向数组中添加项，您可能希望使用.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() };
});

使用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/

我不确定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。

正确的代码如下所示：

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);
    }
}
相关文章：