Question

我有一个项目列表

<ul class="coments-list">
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

我希望在ajax成功之后加载jquery更多项目

...
success: function (id) {
   $('.comment-list').load('/coments?commentid=' + id);
},
...

在此之前的任何代码中都不存在问题，但此代码用加载的<li>元素替换整个列表

Answer 1

试试JQuery append function。例如：

$('.coments-list').append('<li>4</li>');

Fiddle

要结合加载和附加，你可以这样做：

...
success: function (id) {
    $('.coments-list').append($(document.createElement("li")).load('/coments?commentid=' + id));
},
...

它将<li>元素附加到coments-list并使用来自作为参数传递的源的数据加载它。

Answer 2

您可以在加载内容时隐藏新的div。在您可以并将其内容附加到您的ul

之后

尝试：

$(document).append('<div id="content-load" style="display:none;"></div>');
$(document).find('#content-load').load('/coments?commentid=' + id);

$('.comment-list').append($(document).find('#content-load').html());

Answer 3

获取您尝试渲染的内容，然后使用append而不是load。

列表末尾的jQuery加载页面

3 个答案: