Question

我有以下HTML：

<ul style="margin-bottom: 0;" id="stats-results" class="message">
   <li>DS1 Records: <span id="ds1Count"></span></li>
   <li>DEV Records: <span id="devCount"></span></li>
   <li>Added: <span id="Added"></span></li>
   <li>Rejected: <span id="Rejected"></span></li>
   <li>Updated: <span id="Updated"></span></li>
   <li>xxx</li>
</ul>

如何删除第5 <li>之后出现的所有<li>元素？

我也有这段代码：

$.each(data.Events, function (i, item) {
    $("#stats-list").append('<li>' + item.Description + ' : ' + item.Elapsed + ' ms</li>');
});

我有没有办法改变它，以便它在第5 <li>

之后追加

Answer 1

第1部分

$('#stats-results li:gt(4)').remove();

第2部分

要在第5个元素之后连续添加列表中的每个元素，基本上颠倒添加的元素的顺序，您可以这样做：

$.each(data.Events, function (i, item) {
    $("#stats-list li:eq(4)").after('<li>' + item.Description + ' : ' + item.Elapsed + ' ms</li>');
});

或者，要保留您要添加的元素的顺序，但要在第5个索引处启动它们：

$.each(data.Events, function (i, item) {
    $("#stats-list li:eq("+(4+i)+")").after('<li>' + item.Description + ' : ' + item.Elapsed + ' ms</li>');
});

Answer 2

您可以使用nextAll：

$('#stats-results li:eq(4)').nextAll().remove();

after方法：

var html = '';
$.each(data.Events, function (i, item) {
    html += '<li>' + item.Description + ' : ' + item.Elapsed + ' ms</li>';
});
$("#stats-list li:eq(4)").after(html)

如何在<ul>列表中的第n个<li>之后删除元素并追加新元素？</ul> </li>

2 个答案: