Jquery .append() <ul> 标签内的重复元素

Question

我正在创建一个论坛，我希望 cmets 显示他们的日期，这是 html：

<div id="forum" class="panel panel-default">
    <ul class="list-group">

    </ul>
</div>

我正在用 jquery 附加元素：

$.ajax({
        url: '../public/comment',
        type: 'GET',
        dataType: 'json',
        success:function(response) {

            $('#forum ul').empty();
            for (var i in response['comments'])
            {
                $('#forum ul').append('<li class="list-group-item"> <ul> <li class="list-group-item">' +
                    response['comments'][i].date + '</li> <li class="list-group-item">' +
                    response['comments'][i].comment + '</li> </ul> </li> '); 
            }
        }
    });

但是对于我附加到论坛的每条评论，其余的 cmets 都会被复制并附加到它上面。如果我有 3 个 cmets，则显示 7，如果我有 4 个，则显示 15。

我意识到从 jquery 中删除 ul 标签可以解决问题，但出于审美原因，我需要这些标签。有什么问题？

Answer 1

通过写作

$('#forum ul').append(...)

您将所有内容附加到#forum

中的每个

元素，包括
• 标签中的
  标签。

  改成

  $('#forum>ul').append(...)
  

  仅选择直接子级。

  See this post also

Answer 2

我假设每个 ajax 调用都会获得所有 cmets。在这种情况下，只需每次替换列表的整个 html。

//clear your ul
$('#forum ul').html('');
//repopulate
$.ajax({
  url: '../public/comment',
  type: 'GET',
  dataType: 'json',
  success: function(response) {

    $('#forum ul').empty();
    for (var i in response['comments']) {
      $('#forum ul').append('<li class="list-group-item"> <ul> <li class="list-group-item">' +
        response['comments'][i].date + '</li> <li class="list-group-item">' +
        response['comments'][i].comment + '</li> </ul> </li> ');
    }
  }
});