2

これは、jsonデータをループしてdivブロックを出力する最も効率的な方法ですか？

これだけのHTMLがjsで追加されることを心配する必要がありますか？現在、私のjson配列はわずか10アイテムですが、150だった場合はどうなりますか。私はかなり長い間開発から離れていて、LOTが変更されました。よろしくお願いします！

バリー

$.getJSON('output.php', function(data) {

    $.each(data, function(key, val) {

        $("#winesFriends").append(function() {
                return('<div id="wineBlock"><dl><dd><img src="img/sample_btl.jpg" alt="' + val.winery + ' - '+val.vintage+' '+val.varietal+' '+val.name+'"></dd><dt>' + val.winery + '</dt><dd>' + val.vintage + " " + val.name + '</dd></dl></div>');  
        }); 

    });

});
4

1 に答える 1

0

すべてのHTMLコードを収集できます。生成して、次のように1つのステップで追加します。

$.getJSON('output.php', function(data) {

    var out = '';

    $.each(data, function(key, val) {
        out += '<div id="wineBlock"><dl><dd><img src="img/sample_btl.jpg" alt="' + val.winery + ' - '+val.vintage+' '+val.varietal+' '+val.name+'"></dd><dt>' + val.winery + '</dt><dd>' + val.vintage + " " + val.name + '</dd></dl></div>';  
    });

     $("#winesFriends").append( out );

});

これに加えて、HTMLはかなり冗長に見えます。<dl>すべてのエントリの周りに個別に必要ですか？<dl>シングルで十分だと思います。これはまた別の問題を解決するでしょう、あなたは今持っています：あなたのすべての<div>要素は同じを共有しますid。idただし、はドキュメント全体で一意である必要があります。

$.getJSON('output.php', function(data) {

    var out = '<div id="wineBlock"><dl>';

    $.each(data, function(key, val) {
        out += '<dd><img src="img/sample_btl.jpg" alt="' + val.winery + ' - '+val.vintage+' '+val.varietal+' '+val.name+'"></dd><dt>' + val.winery + '</dt><dd>' + val.vintage + " " + val.name + '</dd>';  
    });

    out += '</dl></div>';

    $("#winesFriends").append( out );

});
于 2012-12-18T10:58:22.107 に答える