排序前后的jQuery sortable get .index()？

Question

我在标签插件上使用 jQuery 的 sortable， 该插件以与实际项目相同的顺序维护与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){...}
});

Answer 1

如果.index() 返回-1，这表明您在元素可用于DOM 之前发出该请求。 或您错误地标记了一个选择器，并且在调用时它再次不存在或相对于 .index() 函数为空

Answer 2

您可以将一些数据与每个列表项相关联，以便像这样跟踪它们：

<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');

Answer 3

$（函数（）{ $( "#sortable" ).sortable({ 更新：函数（事件，用户界面）{ console.log('更新：'+ui.item.index()) }, 开始：函数（事件，用户界面）{ console.log('开始：' + ui.item.index()) } }); $( "#sortable" ).disableSelection(); });