Question

我正在创建一个论坛，我希望评论与他们的日期一起出现，这是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> '); 
            }
        }
    });

但是，对于我附加到论坛的每条评论，其余评论都是重复的并附在其上。如果我有三个评论它显示7，如果我有4它显示15。

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

Answer 1

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

＆＃13;

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

＆＃13;

Answer 2

写作

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

你将所有内容附加到每个＆lt; ul＆gt;你的#forum＆lt; div＆gt;中的元素，包括＆lt; ul＆gt;你的＆lt; li＆gt;中的标签标签

将其更改为

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

仅选择直系儿童。

See this post also

Jquery .append（）重复<ul>标记内的元素

2 个答案: