24

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

排序完成后，我需要更新数组中项目的顺序。

我以为我只能在开始事件调用$(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){...}
});
4

3 回答 3

44 
$（函数（）{
    $( "#sortable" ).sortable({
        更新：函数（事件，用户界面）{
            console.log('更新：'+ui.item.index())
        },
        开始：函数（事件，用户界面）{
            console.log('开始：' + ui.item.index())
        }
    });
    $( "#sortable" ).disableSelection();
});
于 2012-10-18T21:31:37.820 回答
12

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

于 2012-05-06T03:26:07.300 回答
4

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

<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');
于 2012-05-06T03:37:18.130 回答