将 json 数据附加到 html 类名

Question

我的 json 代码有问题。 我想附加每个 json 值来自要附加到与 json 数据的键匹配的 html 类名的键。

这是我的Live demo

如果您在生活演示中看到结果。它只是附加最后一条记录。 是否可以让它按顺序显示所有记录？

json

var json = '[{"castle":"big","commercial":"large","common":"sergio","cultural":"2009"},' + '{"castle":"big2","commercial":"large2","common":"sergio2","cultural":"20092"}]';

html

<div class="castle"></div>
<div class="commercial"></div>
<div class="common"></div>
<div class="cultural"></div>

javascript

var data = $.parseJSON(json);
$.each(data, function(l,v) {
    $.each(v, function(k,o) {
        $('.'+k).attr('id', k+o);
        console.log($('#'+k+o).attr('id'));
        $('#'+k+o).text(o);
     });
});

更多说明... 我希望现场演示中的结果看起来像这样

大 大的 塞尔吉奥 2009年， 大2 大2 塞尔吉奥2 20092

Answer 1

尝试使用

$('#'+k+o).append(o+',');

而不是

$('#'+k+o).text(o);

Demo

---

但我会使用更快的替代方案：

var data = JSON.parse(json);
for(var i in data[0]) {
    if(data[0].hasOwnProperty(i)) {
        var txt = data[0][i];
        for(var j=1; j<data.length; j++) {
            txt += ', ' + data[j][i];
        }
        $('.'+i).text(txt);
    }
}

Demo

请注意，$.each 的速度比 jQuery 开发人员推荐的尽可能使用 JS 循环的速度还要慢。并且请注意，DOM 更改是昂贵的，因此最好将您的文本存储在一个变量中，当您拥有所有内容时追加它，但避免部分地追加它。

---

如果您不想将它们混合，请使用

var data = JSON.parse(json),
    $el = $('#data');
for(var i=0, l=data.length; i<l; ++i) {
    for(var j in data[i]) {
        if(data[i].hasOwnProperty(j)) {
            $el.append(
                $('<li>')
                    .attr("id",j+data[i][j])
                    .text(data[i][j])
            );
        }
    }
}

Demo