如何在用戶移動元素時使用jQuery排序來更新div ID？

Question

我正在使用jQuery可排序以允許用戶在頁面上移動元素。每個div元素都有一個唯一的ID。當用戶使用另一個頁面交換頁面上的元素時，我還想交換這些元素ID並提醒新的ID列表的順序，因此我可以將此新訂單保存到後端。

我很努力地獲取用戶移動元素時的子元素ID。我的jQuery到目前爲止是：

$(function() { 
    $("#sortable").sortable({ 
     stop: function(ev, ui) { 
     var children = $('#sortable').sortable('refreshPositions').children(); 
     alert('Positions: '); 
     $.each(children, function() { 
      alert($(this).attr('id')); 
     }); 
     } 
    }); 
    $("#sortable").disableSelection(); 
    var drag_id = $('.container').attr("id"); 
    }); 

但警報消息總是undefined。如何在用戶進行更改時交換div ID，並將其保存到數組中，然後alert這個數組？

FIDDLE

Answer 1

必須爲li標籤設置ID：

$(function() { 
    $("#sortable").sortable({ 
     stop: function(ev, ui) { 
     var children = $('#sortable').sortable('refreshPositions').children(); 
     alert('Positions: '); 
     $.each(children, function() { 
      alert($(this).attr('id')); 
     }); 
     } 
    }); 
    $("#sortable").disableSelection(); 
    var drag_id = $('.container').attr("id"); 
}); 

檢查小提琴現在：

Fiddle

Answer 2

下面的代碼或將有所幫助？

$(function() { 
    $("#sortable").sortable({ 
    stop: function(ev, ui) { 
     var children = $('#sortable').sortable('refreshPositions').find(".container"); 

     $.each(children, function() { 
     alert($(this).attr('id')); 
     }); 
    } 
    }); 
    $("#sortable").disableSelection(); 
    var drag_id = $('.container').attr("id"); 
});