javascript - 使用 jquery 遍历数组仅返回最后一个对象

Question

我是 jquery 的新手，我认为这只是一个基本问题。`

<input type="text" name="text1" value=""></input>
<input type="text" name="text2" value=""></input>
<input type="text" name="text3" value=""></input>
<input type="text" name="text4" value=""></input>
<input type="text" name="text5" value=""></input>       
<input type="submit" value="submit"></input>
<pre id="result">
</pre>
</form>`  

这是我的 html 表单，我正在使用以下 jquery 函数来生成 json 对象

$.fn.serializeObject = function()
{
var o = {};
var d={};
var a = this.serializeArray();
$.each(a, function(i,n) {
o['name'] = n['name'];
o['content'] =(n['value']);
});
return o; 
};    

$(function() { $('form').submit(function() { $('#result').text(JSON.stringify($('form').serializeObject())); return false; });
});

在运行上面的 html 时，我得到了输出 {"name":"text5","content":"sdsd"}

只是最后的文本字段。我知道某处错了。有人可以帮我解决它。提前致谢

Answer 1

那是因为您正在覆盖对象的属性并且最后一个值获胜，您可以使用数组及其push方法。

$.fn.serializeObject = function () {
    var o = [];
    var a = this.serializeArray();
    $.each(a, function (i, n) {
        o.push({
            name: n['name'],
            content: n['value']  
        })
    });
    return o;
};

http://jsfiddle.net/kxM3e/

使用 jQuerymap方法：

$.fn.serializeObject = function () {
    return this.find('input, textarea, select').map(function(){
        return { name: this.name, content: this.value };
    }).get();
};