[英]How can I remove elements and append new elements after the nth <li> in a <ul> list?
我有以下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>');
});
有没有办法我可以更改它,使其在第5个<li>
之后追加
第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>');
});
您可以使用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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.