[英]Append data to div using jquery
我能知道如何使用每行的jquery将标题和消息附加到div吗? 我的代码的问题是每个数据都没有显示在一行中。
<!--
For instance: Title1
Message1
Title2
Message2 -->
<div class="widget-box">
<div class="widget-title bg_lo" data-toggle="collapse" href="#collapseG3" > <span class="icon"> <i class="icon-chevron-down"></i> </span>
<h5>Topic</h5>
</div>
<div id="announcement" class="widget-content nopadding updates collapse in" id="collapseG3">
<div class="new-update clearfix">
<div class="update-done"><strong id ="title"><!-- post.title --></strong></a> <span id ="message"><!-- post.message --></span> </div>
</div>
</div>
</div>
<script>
$.ajax({
url: '/test/back-api/admin/announcements',
method: 'GET',
success: function(d){
if(d.result){
var posts = d.data;
for(var i=0; i < posts.length; i++){
var post = posts[i];
$('#announcement').append(post.title, post.message);
}
}else{
$('#announcement').append("<div> </div>");
}
}
});
</script>
这是显示用例的代码片段
SNIPPET
var message_container = '<div class="new-update clearfix"><div class="update-done"><strong id ="title"><!-- post.title --></strong></a> <span id ="message"><!-- post.message --></span> </div></div>'; $("#add").on('click',function(){ var message= $(message_container); var post = { title: "<h1>title</h1>", message: "<p>message</p>"}; message.find('#title').append(post.title); message.find('#message').append(post.message); $("#announcement").append(message); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="widget-box"> <div class="widget-title bg_lo" data-toggle="collapse" href="#collapseG3" > <span class="icon"> <i class="icon-chevron-down"></i> </span> <h5>Topic</h5> </div> <div id="announcement" class="widget-content nopadding updates collapse in" id="collapseG3"> </div> </div> <button id="add">Add</button>
你可以在ajax中做同样的事情
var message_container = '<div class="new-update clearfix"><div class="update-done"><strong id ="title"><!-- post.title --></strong></a> <span id ="message"><!-- post.message --></span> </div></div>';
$.ajax({
url: '/test/back-api/admin/announcements',
method: 'GET',
success: function(d) {
if (d.result) {
var posts = d.data;
for (var i = 0; i < posts.length; i++) {
var post = posts[i];
var message = $(message_container);
message.find('#title').append(post.title);
message.find('#message').append(post.message);
$("#announcement").append(message);
}
});
在我看来,如果您正在处理记录集合,那么标记将无法很好地工作。 您最终可能会遇到的事情是...
<!-- Title1
Title2
Message1
Message2 -->
稍微更改代码,以便可以为每个记录添加标记:
$.ajax({
url: '/test/back-api/admin/announcements',
method: 'GET',
success: function(d){
if(d.result){
var posts = d.data;
for(var i=0; i < posts.length; i++){
var post = posts[i];
var Title = "<div class=\"title\">" + post.title + "</div>";
var Message = "<div class=\"message\">" + post.message + "</div>";
$('#announcement').append(Title, Message);
}else{
$('#announcement').append("<div> </div>");
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.