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

Posted 2023-02-24

【中文标题】排序前后的jQuery sortable get .index()？

【英文标题】：jQuery sortable get .index() before and after sorting?

【发布时间】：2012-05-15 02:51:30

【问题描述】：

我在标签插件上使用 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)...
);

【问题讨论】：

能否请您发布一些您的代码，以便我们有地方开始？不知道什么是 ui 等很难指导你。谢谢。

【参考方案1】：

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

【讨论】：

你是对的，问题是我需要打电话给$(ui.item).index() 而不仅仅是$(ui).index()！

注意：$(ui.item) 不是必须的； ui.item.index() 可以正常工作。

【参考方案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');

【参考方案3】：

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

【讨论】：

如果您希望在更新中可以使用起始索引，那么您需要像这样设置它：$(ui.item).data('startindex', ui.item .index()) 然后使用 $(ui.item).data().startindex

访问它