0

json コードに問題があります。各json値を追加したいのは、jsonデータのキーと一致するhtmlクラス名に追加されるキーからのものです。

ここに私のライブデモがあります

人生のデモで結果が表示された場合。最後のレコードを追加するだけです。すべてのレコードを順番に表示することはできますか?

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、big2 large2 sergio2 20092

4

1 に答える 1

0

使ってみて

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

それ以外の

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

デモ

しかし、私はより速い代替手段を使用します:

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);
    }
}

デモ

$.eachjQuery 開発者でさえ、可能であれば 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])
            );
        }
    }
}

デモ

于 2013-11-03T03:23:16.633 に答える