Question

我是否可以知道如何使用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>

Answer 1

以下是显示用例

的代码段

<强>段

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

你可以在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);
          }
 });

Answer 2

在我看来，如果您正在处理一组记录，那么您的标记将无法正常工作。你最终可能会以你的方式结束......

<!-- 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>");
     }
 });

使用jquery将数据附加到div

2 个答案: