Question

我正在使用jQuery来显示来自数据库的消息，这是jquery文件：

function call() {
    $(".message_box").fadeIn();
    return false;
}
    function updatess() {
         $.getJSON("php/fetch.php", function(data) {
           $.each(data.result, function(){
            var message = this['message'];
            call();  
            $('div.message').html( message ); 
      });
     });
    }

这是HTML文件：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd" >
    <html>
    <head>
    <title>Sample Chat Application</title>
    <script type="text/javascript" src="js/jquery.js" ></script>
    <script type="text/javascript" src="my_js.js"></script>
    </head>
    <body>
<div class="message_box"> // some css like displayed:none; ......
        <div class="message"></div>
</div>  
  </body>
    </html>

但问题是，如果有两条消息，它只显示最新消息，如果有很多消息，每次新消息到来时都会替换旧消息。但我想要显示所有消息。例如，如果我收到3条消息，我想要3个框出现而不仅仅是一个。当我使用append而不是html时，所有消息都出现在一个框中。

Answer 1

您应该使用append方法而不是覆盖以前内容的html方法：

function updatess() {
     $.getJSON("php/fetch.php", function(data) {
         // calling `.empty()` before the `.each()` call
         var $div = $('div.message').empty();
         $.each(data.result, function() {
            var message = this['message'];
            $div.append( message ); 
         });
    });
}

请注意，我在.empty()来电之前使用.each()方法删除旧内容，如果这不是您想要的，并且您想要保留当前内容，则可以删除.empty()方法。

编辑：为每封邮件创建和附加div类message元素：

$.each(data.result, function() {
     $(document.createElement('div'))
          .addClass('message')
          .html(this['message'])
          .appendTo('.message_box');
});

Answer 2

您每次使用此行替换div中的HTML：

$('div.message').html( message );

您可以将邮件包装在另一个div中，然后添加它：

var message = $('<div></div>').html(this['message']); 
$('div.message').append( message );

编辑后：

如果您想为每个项目添加新的消息框，则需要为每个项目创建一个新的消息框。

试试这个：

function addMessage(message) {
    var messageBox = $('<div></div>').addClass('message_box');
    messageBox.append(message);
    $('body').append(messageBox);
    messageBox.fadeIn();
}

function updatess() {
     $.getJSON("php/fetch.php", function(data) {
       $.each(data.result, function(){
        var message = this['message'];
        addMessage(message);
  });
 });
}

Answer 3

尝试：

 $('div.message').append( message );

以HTML格式显示JQuery数据

3 个答案: