JQuery sortable get.index() до и после сортировки?

Я использую jQuery для сортировки по плагину тегов, Плагин поддерживает массив объектов, которые относятся к li в том же порядке, что и фактические элементы.

Мне нужно обновить порядок элементов в массиве, когда сортировка закончится.

Мне казалось, что я просто смогу в вызове на начало события $(ui).index() и в вызове события обновления то же самое, что даст мне начальную позицию и конечную позицию, но оба вызова возвращаются -1.

Как мне это сделать?

Состав:

<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>

Структура массива:

[{
    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){...}
});

Ответы

Ответ 1

если .index() возвращает -1, что предполагает, что вы делаете этот запрос до того, как элемент будет доступен для DOM. или вы неправильно указали селектор, и снова он не существует @время вызова или пусто по отношению к функции .index()

Ответ 2

$(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();
});

Ответ 3

вы можете связать некоторые данные с каждым элементом списка, чтобы отслеживать их следующим образом:

<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>

вы можете получить доступ к этим данным через jQuery следующим образом:

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