javascript - 如何删除元素并在 列表中的第 n 个 之后添加新元素？

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>

如何删除任何 <li>第五个 <li> 之后出现的元素？

我还有这个代码:

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

有没有办法可以更改它，以便它附加在第五个 <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>');
});