Question

我在标记插件上使用jQuery的可排序，该插件维护一个与li相关的对象数组，其顺序与实际项目相同。

我需要在排序结束时更新数组中项目的顺序。

我以为我能够在启动事件中调用$(ui).index()并在更新事件中调用相同的内容，这将为我提供初始位置和最终位置，但两个调用都返回{{1} }。

我该怎么做？

<小时/> 的结构：

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

JavaScript的：

[{
    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
}]

Answer 1

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

Answer 2

如果.index()返回-1，则表示您在元素可用于DOM之前发出该请求。或你错误地标记了一个选择器并且它在@调用时不存在或者与.index（）函数相关是空的

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

排序之前和之后的jQuery sortable get .index（）？

3 个答案: