jQuery có thể sắp xếp lấy .index() trước và sau khi sắp xếp?

Question

Tôi đang sử dụng jQuery có thể sắp xếp trên một plugin gắn thẻ, Plugin duy trì một mảng các đối tượng có liên quan đến các mục li theo cùng thứ tự như các mục thực tế.

Tôi cần cập nhật thứ tự của các mục trong mảng khi sắp xếp kết thúc.

Tôi nghĩ rằng tôi chỉ có thể thực hiện cuộc gọi bắt đầu $(ui).index() và trong sự kiện cập nhật gọi như vậy sẽ cho tôi vị trí ban đầu và vị trí cuối cùng, nhưng cả hai cuộc gọi đều trả về -1.

Tôi nên làm như thế nào?

---

Cấu trúc:

<ul> 
<li>here<a class="close">x</a></li> 
<li>are<a class="close">x</a></li> 
<li>some<a class="close">x</a></li> 
<li>tags<a class="close">x</a></li> 
</ul> 

Mảng Cấu trúc:

[{ 
    label: 'here', 
    value: 36, 
    element: '$(the li that this info is about)', 
    index: 0 
}, 
{ 
    label: 'are', 
    value: 42, 
    element: '$(the li that this info is about)', 
    index: 1 
}, 
{ 
    label: 'some', 
    value: 21, 
    element: '$(the li that this info is about)', 
    index: 2 
}, 
{ 
    label: 'tags', 
    value: 26, 
    element: '$(the li that this info is about)', 
    index: 3 
}] 

JavaScript:

$('ul').sortable({ 
    start: function(event, ui){...}, 
    update: function(event, ui){...} 
}); 

Answer 1

nếu .index() đang trở lại - 1, điều đó sẽ gợi ý bạn đang đưa ra yêu cầu đó trước khi phần tử có sẵn cho DOM. hoặc bạn đã gắn nhãn sai công cụ chọn và lại không tồn tại @ thời gian gọi hoặc không có liên quan đến hàm .index()

Answer 2

bạn có thể kết hợp một số dữ liệu với từng mục danh sách để theo dõi chúng như thế này :

<ul id="sortable"> 
<li data-id="1" class="ui-state-default">1</li> 
<li data-id="2" class="ui-state-default">2</li> 
<li data-id="3" class="ui-state-default">3</li> 
</ul> 

sau đó bạn có thể truy cập dữ liệu này qua jQuery như thế này:

$('ul li:nth-child(0)').data('id'); 
$('ul li:nth-child(1)').data('id'); 
$('ul li:nth-child(2)').data('id'); 

Answer 3

 
$(function() { 
    $("#sortable").sortable({ 
     update: function(event, ui) { 
      console.log('update: '+ui.item.index()) 
     }, 
     start: function(event, ui) { 
      console.log('start: ' + ui.item.index()) 
     } 
    }); 
    $("#sortable").disableSelection(); 
});