Javascript 如何为jQuery sortable获取新项目和已删除项目的递增序列号？

使用jQuery

sortable

函数，我有一个简单的表，其中的条目是可排序的。我已经知道如何在移动条目时更新它们的索引，但是我在添加新条目时遇到了问题。这是工作时间

到目前为止，我所做的添加递增序列索引的工作非常混乱，因此在我的示例中，我刚刚在

append

中添加了

1

因此，我的问题是：

如何获取递增序列号。何时添加新项目？及

当一个项目被删除时，序列将崩溃，直到我移动一个项目。移除一个项目时，如何更新序列号

非常感谢你的建议

---

此处的代码段不起作用，原因是我不理解，但我还是添加了以下内容：

$（文档）.ready（函数（）{
var FIXHELPERMODIFED=函数（e，tr）{
var$originals=tr.children（）；
var$helper=tr.clone（）；
$helper.children（）.each（函数（索引）{
$（this）.width（$originals.eq（index.width（））
});
返回$helper；
},
updateIndex=函数（e，ui）{
$（'td.index'，ui.item.parent（））。每个（函数（i）{
$（this.html（i+1）；
});
};
$（“#排序体”）。可排序({
helper:fixHelperModified，
停止：更新索引
}).disableSelection（）；
$（“#添加新”）。单击（函数（）{
$（'添加'）。追加（“11969删除”）；
});
$（“body”）。在（'单击'，'添加.删除'，函数（）上{
$（this）.最近（“.rem”）.remove（）；
});
});

添加新项目
不，我的头衔
11969删除
21952删除
31963delite
在这里，我在代码中添加了注释来解释我所做的事情


$（文档）.ready（函数（）{
var FIXHELPERMODIFED=函数（e，tr）{
var$originals=tr.children（）；
var$helper=tr.clone（）；
$helper.children（）.each（函数（索引）{
$（this）.width（$originals.eq（index.width（））
});
返回$helper；
},
//updateIndex函数在没有任何参数的情况下工作正常
updateIndex=函数（）{
$（'td.index'）。每个（函数（i）{
$（this.html（i+1）；
});
};
$（“#排序体”）。可排序({
helper:fixHelperModified，
停止：更新索引
}).disableSelection（）；
$（“#添加新”）。单击（函数（）{
$（'添加'）。追加（“11969删除”）；
//添加新元素后只需更新标记即可
updateIndex（）；
});
$（“body”）。在（'单击'，'添加.删除'，函数（）上{
$（this）.最近（“.rem”）.remove（）；
//删除一个元素后相同
updateIndex（）；
});
});

添加新项目
不，我的头衔
11969删除
21952删除
31963delite
在这里，我在代码中添加了注释来解释我所做的事情


$（文档）.ready（函数（）{
var FIXHELPERMODIFED=函数（e，tr）{
var$originals=tr.children（）；
var$helper=tr.clone（）；
$helper.children（）.each（函数（索引）{
$（this）.width（$originals.eq（index.width（））
});
返回$helper；
},
//updateIndex函数在没有任何参数的情况下工作正常
updateIndex=函数（）{
$（'td.index'）。每个（函数（i）{
$（this.html（i+1）；
});
};
$（“#排序体”）。可排序({
helper:fixHelperModified，
停止：更新索引
}).disableSelection（）；
$（“#添加新”）。单击（函数（）{
$（'添加'）。追加（“11969删除”）；
//添加新元素后只需更新标记即可
updateIndex（）；
});
$（“body”）。在（'单击'，'添加.删除'，函数（）上{
$（this）.最近（“.rem”）.remove（）；
//删除一个元素后相同
updateIndex（）；
});
});

添加新项目
不，我的头衔
11969删除
21952删除
31963delite
Danmoreng的解决方案在某些情况下可以很好地工作，但如果有必要将
$（'td.index'）
集合约束到上下文
ui.item.parent（）
，则情况并非如此

我所知道的允许保留上下文的最干净的解决方案有点混乱，但也不太糟糕

基于，您可以按如下方式触发“停止”方法

$("#add").sortable('option', 'stop')();

。。。但您需要传递一个合成的“ui.item”（这就是为什么我说它有点凌乱）

$（“#添加新”）。单击（函数（e）{
//调用stop回调，传递合成（e，ui）参数
$（“#添加”）。可排序（'option'，'stop'）（e{
'项目'：$（“11969删除”）。附录（#添加）
});
});
$（“#添加”）。在（'单击'，'删除'，函数（e）{
变量$tbody=$（this）.closest（'tbody'）；
$（this）.最近（“.rem”）.remove（）；
//调用stop回调，传递合成（e，ui）参数
$（“#添加”）。可排序（'option'，'stop'）（e{
'item'：$tbody//tbody元素，dicovered*before*行已从中删除
});
});


在delete处理程序中，传递
$tbody
是一种方便，在所有情况下都不起作用。它在这里起作用是因为我们知道，
updateIndex（）
对其
ui
参数的唯一作用是
$（'td.index'，ui.item.parent（））
，无论
ui.item
是否为：


“tr”，在这种情况下，父对象是tbody，或
包含
tbody
的tr，在这种情况下，父元素是表元素

无论采用哪种方式，
$（'td.index'，ui.item.parent（））
都会找到所需的
td.index
元素。
Danmoreng的解决方案在某些情况下可以正常工作，但如果
$（'td.index'）
集合需要约束，则不需要
$("#addNew").click(function(e) {
    // call the stop callback, passing synthetic (e, ui) parameters
    $("#add").sortable('option', 'stop')(e, {
        'item': $("<tr class='rem'><td class='index'>1</td><td>1969</td><td><input name='foo'> <button class='delete'>Delete</button></td></tr>").appendTo("#add")
    });
});

$("#add").on('click', '.delete', function(e) {
    var $tbody = $(this).closest('tbody');
    $(this).closest(".rem").remove();
    // call the stop callback, passing synthetic (e, ui) parameters
    $("#add").sortable('option', 'stop')(e, {
        'item': $tbody // the tbody element, dicovered *before* row was removed from it
    });
});