如何用循环 each () 显示 json div class

Question

我正在尝试显示 return json 一个部分，但显示全部在同一部分 div

<section>
<div class="conteudo">
    <div class="foto"> FOTO </div>
    <div class="inf"> TITULO </div>
    <div class="inf"> DESCRICAO </div>
    <div class="inf"> PRECO </div>
</div>
    <div class="conteudo">
    <div class="foto"> FOTO </div>
    <div class="inf"> TITULO </div>
    <div class="inf"> DESCRICAO </div>
    <div class="inf"> PRECO </div>

我试试：

    $.ajax({
    type: 'GET',
    url: "categoria/"+id,
    contentType: "charset=utf-8",
    }).done(function(output){

        json = $.parseJSON(output);

        $('.conteudo').empty();

        $.each(json, function(i, items){

            $('.conteudo').append(


            items.fields['imagem'],
            items.fields['nome_produto'],
            items.fields['descricao'],
            items.fields['preco_produto']
            );


        });


});

尝试使用 (.html .appedTo addClass .append) 但没有任何结果

Answer 1

您需要使用现有的 .conteudo div 作为模板，克隆 div 并将 div 中每个字段中的文本替换为数据：

// take a copy of an existing one as a template
$.each(json, function (i, items) {
    var clone = $('.conteudo:first').clone();
    clone.find('.foto').text(items.fields['imagem']);
    clone.find('.inf:eq(0)').text(items.fields['nome_produto']);
    clone.find('.inf:eq(1)').text(items.fields['descricao']);
    clone.find('.inf:eq(2)').text(items.fields['preco_produto']);
    $('section').append(clone);
});

我用 JSON 字面上创建的示例对象为您制作了一个模型：http://jsfiddle.net/TrueBlueAussie/q44mym2d/1/

已更新为使用简单模板

由于您有清除该部分所有当前项目的要求，我建议使用模板系统。我最喜欢的是简单地使用一个虚拟脚本块来包含空模板 HTML:

例如

<script id="template" type="text/template">
    <div class="conteudo">
        <div class="foto"></div>
        <div class="inf"></div>
        <div class="inf"></div>
        <div class="inf"></div>
    </div>
</script>

type="text/template" 是未知类型，因此所有浏览器都会忽略它。

代码然后使用该元素中的 HTML 和 html()。

例如我刚改了这一行

var clone = $($('#template').html());

已更新 JSFiddle： http://jsfiddle.net/TrueBlueAussie/q44mym2d/2/

这意味着您可以销毁所有现有项目而不用担心，因为模板是独立的（并且可以很好地编辑）。

如何用循环 each () 显示 json div class

how to display the json div class with the loop each ()

jquery

loops