javascript - 使用 jQuery 结果渲染多个 div

Question

我有一些数据需要在页面上呈现。页面的形式将是这样的:

<div class="container">
    <div class="row align-items-center">
        <div class="col-md-3">
            <div style="border: 2px solid grey; border-radius: 12px; padding: 5px; margin-bottom: 10px" class="anliegenGrammatik"></div>
        </div>
        <div class="col-md-3">
            <button class="btn"><b style="color: red">X</span></b>
        </div>
    </div>
</div>

这是我获取数据的地方:

function selectGrammar(grammar) {
    var params = {};
    params['BereichID'] = bereichsID;
    params['GrammarName'] = grammar.text.trim();
    params = JSON.stringify(params, null, ' ');
    $.ajax({
        url: 'http://localhost/something&DLLFunc=getAnliegenGrammar',
        type: "POST", // type of action POST || GET
        data: params,
        dataType: 'json', // data type
        contentType: "application/json; charset=utf-8",
        success: function(response) {
            $('#exampleModalLong').modal('toggle');
            $('.anliegenGrammatik').text("Test");
            showPage('afterBrowse');
        },
        error: function(xhr, resp, text) {
            console.log(xhr, resp, text);
        }
    })
}

作为 response 我有多个项目(作为 JSON)...并且我想为每个项目呈现一个 div。

我尝试过这样的事情:

$.each(response, function(index) {
    $('.anliegenGrammatik').text(response[index].name);
});

但它只填充并显示一个 div。

有人吗？

Answer 1

发生这种情况是因为您不断更改同一元素的文本 .anliegenGrammatik

你的 html 和循环应该像

<div class="container">
    <div class="row align-items-center">
        <div class="col-md-3" id="append_target">
            <div style="border: 2px solid grey; border-radius: 12px; padding: 5px; margin-bottom: 10px" class="anliegenGrammatik"></div>
        </div>
        <div class="col-md-3">
            <button class="btn"><b style="color: red">X</span></b>
        </div>
    </div>
</div>

/* SCRIPT */

var clone = $('.anliegenGrammatik').clone();
$('.anliegenGrammatik').remove();
$.each(response, function(index, item) {
    var t_clone = clone.clone(); // you need to clone each loop cycle 
                                 // otherwise you keep appending the same element again and again
    t_clone.text( item.name );
    $('#append_target').append(t_clone);
});