2

这是循环 json 数据并打印 div 块的最有效方法吗？

我是否应该担心将这么多的 HTML 附加到 js 中？现在我的 json 数组只有 10 项，但如果是 150 项呢？我已经离开开发很长一段时间了，而且发生了很多变化。我将不胜感激任何方向，在此先感谢！

巴里

$.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 代码，您正在生成并在一个步骤中附加它，如下所示：

$.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 回答