删除后使用jQuery重新排序附加的元素编号
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了删除后使用jQuery重新排序附加的元素编号相关的知识，希望对你有一定的参考价值。
如何在删除数据后再次重新排序附加元素？我做了一个例子如下，删除后附加的数字保持相同的数字。
$(document).ready(function(){
$('.do-append').on('click', function(){
var index = $('append div').length;
$('append').append('<div><label>Appended : '+index+'</label>   <a href="javascript:;" class="delete" style="color: red">delete</a></div>');
});
$('append').on('click', '.delete', function(e){
$(e.target).closest('append div').remove();
});
})<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<a href="javascript:;" class="do-append">click me</a><br><br>
<append></append>
</body>
</html>答案
创建一个updateLabels函数，如下所示，并在添加和删除项目时调用它
function updateLabels() {
var index = $('append div').length;
for (var i = 0; i < index; i++) {
$($($('append div')[i]).find("label")[0]).text('Appended : ' + i);
}
}
$(document).ready(function() {
$('.do-append').on('click', function() {
var index = $('append div').length;
$('append').append('<div><label></label>   <a href="javascript:;" class="delete" style="color: red">delete</a></div>');
updateLabels();
});
$('append').on('click', '.delete', function(e) {
$(e.target).closest('append div').remove();
updateLabels();
});
function updateLabels() {
var index = $('append div').length;
for (var i = 0; i < index; i++) {
$($($('append div')[i]).find("label")[0]).text('Appended : ' + i);
}
}
})<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<a href="javascript:;" class="do-append">click me</a><br><br>
<append></append>
</body>
</html>另一答案
您可以尝试下面的逻辑，您可以在div下更新已删除元素之后的标签。
$(document).ready(function(){
$('.do-append').on('click', function(){
var index = $('append div').length;
$('append').append('<div><label>Appended : '+index+'</label>   <a href="javascript:;" class="delete" style="color: red">delete</a></div>');
});
$('append').on('click', '.delete', function(e){
var $parent = $(e.target).closest('append div');
var index = $parent.index();
$parent.remove();
if(index>0) {
$('append div:gt('+ (index-1) +')').each(function(){
$('label', this).html('Appended : '+index);
index++;
});
} else {
$('append div').each(function(){
$('label', this).html('Appended : '+ index);
index++;
});
}
});
})<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<a href="javascript:;" class="do-append">click me</a><br><br>
<append></append>
</body>
</html>以上是关于删除后使用jQuery重新排序附加的元素编号的主要内容，如果未能解决你的问题，请参考以下文章
使用 JQuery 在 Droppend 时停止删除可拖动元素