跟踪jQuery排序表中所有元素的位置

我试图找出如何跟踪jQuery中的元素如何排序。 假设在我的排序表中有四个元素（div），每个元素都有一个唯一的id。让我们称它们为#100、#200、#300和#400，并且它们是按照这个顺序显示的。但是当我把#100移动到3号位置时，我需要能够保存这个id的新位置，同时还要确保其他位置也得到更新的位置值

我说得通吗？基本上我想得到每个唯一id的位置，这样我就可以保存列表的顺序供以后使用

我还没有找到可以报告排序表中所有元素的内容，只报告被移动的元素

给我指出正确的方向？ 谢谢

可能的副本

基本上，为了得到一个元素在一个可排序表中的位置（或者仅仅是一个普通的父元素），就像

$('#300').index();

如果未移动任何内容（

index（）

从零开始计数），此代码将返回2，并在元素重新排列时更新

---

这里有一个演示：。您可以单击元素以查看其位置，拖动元素时会显示新位置。

您可以使用可排序中提供的停止事件来跟踪项目。这是一个小例子

(function($) {
    $('#sortable').sortable({
        stop: function(e, ui) {
            console.log($.map($(this).find('li'), function(el) {
                return el.id + ' = ' + $(el).index();
            }));
        }
    });
})(jQuery);

这将记录排序表中所有项的数组及其id和当前索引

这里还有一个关于JSFIDLE的工作示例：

根据文档，我建议您使用内置方法

toArray

。 例如：

---

没问题！编辑了一些小的改进，用“this”代替“el”，用this.id代替$（el）.attr（'id'），因为后者是不必要的，因为我们没有做任何链接。fiddle与旧示例保持相同，因此您可以比较这两个示例：）尝试了更新的代码，但不起作用。有什么想法吗？看起来我有点搞砸了，我们确实需要“el”，因为$中的“this”。map是“window”对象，而不是当前元素。“this”是$.fn.map（$（selector）.map（fn））tho中的当前元素，只是为了说明这一点。此注释应该是所有排序和位置问题的答案。我尝试了所有其他的可能性，但我从来没有完全了解什么在移动，以前的位置是什么。只需将它们放在start和update中，并添加两个鼠标事件（down/up）即可获得所选元素并显示总结果

  $(document).ready(function() {
    $('#sortable').sortable({
      stop: function(e, ui) {
        console.log($('#sortable').sortable('toArray'));
      }
    });
    $('#sortable').disableSelection();
  });