我有一些数据需要在页面上呈现。页面的形式将是这样的:
<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。
有人吗?
最佳答案
发生这种情况是因为您不断更改同一元素的文本 .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);
});
关于javascript - 使用 jQuery 结果渲染多个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51079346/