Question

这是循环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>');  
        }); 

    });

});

Answer 1

您可以收集所有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 );

});

使用JQuery在HTML中打印Json数组

1 个答案: