javascript - 如何将对象的键/值对写入页面

Question

我正在尝试使用 jquery 的 .each() 函数将对象中的键/值对写入页面。但是，我只能让它写出最后一个键/值对。

这是小提琴和代码：

http://jsfiddle.net/Nirvanachain/2RsN9/

JS：

var defaults = {
 validate: false, 
 limit: 5, 
 name: "foo"   
};

$.each(defaults, function(key, value) {
  $('p').text(key + ' : ' + value);
});

HTML：

<p></p>

Answer 1

.text()覆盖元素的内容，因此您最终会得到上次迭代中发生的情况。请尝试.append()：

http://jsfiddle.net/ZjwWn/

$.each(defaults, function(key, value) {
    $('p').append(key + ' : ' + value + '<br/>');
});

编辑-里卡多的评论是正确的。为获得最佳性能，请尽可能少地修改 DOM。在这种情况下，您应该创建一个变量来附加文本，然后将其附加到 DOM 一次。

Answer 2

.text()正在覆盖。

您只需将值保存在变量中或附加它。

写这个：

var defaults = {
    validate: false,
    limit: 5,
    name: "foo"
};
var txt = "";
$.each(defaults, function (key, value) {
    txt += key + ' : ' + value + " ";
});
$('p').text(txt);

在这里更新了小提琴。

Answer 3

$.each(defaults, function(key, value) {
    $('p').text( $('p').text() + key + ' : ' + value);
});