jQuery UI 获取 UL 中 LI 元素的排序位置

Question

我正在使用 jQuery UI 的可排序功能来处理我的 UL 列表。每次用户对列表进行排序时，我希望每个 li 元素将其“position”属性更新为其在列表中的位置。

<ul>
<li position="1">a</li>
<li position="2">b</li>
<li position="3">c</li>
</ul>

因此，当用户将 c 与 a 交换时，位置也会更新。我尝试使用 .each 但似乎 javascript 不遵循 LI 元素显示的顺序，而是遵循元素创建的顺序。

Answer 1

正如另一个答案中提到的，使用 update 就是您所需要的：

$(function() {
    var $sortable = $('ul').sortable({
        update: function(event, ui) {
            var counter = 1;
            $('li', $sortable).each(function() {
                $(this).attr('position', counter);
                counter++;
            });
        }
    });
});

示例链接

Answer 2

您是否尝试过 :eq 选择器或 index 方法？如果您知道要查找哪个 li 元素的位置，则可以像这样找到该位置：

<ul>
<li id="c">c</li>
<li id="b">b</li>
<li id="a">a</li>
</ul>

var 位置 = $('li#b').index();

Answer 3

您将需要利用可排序的“更新”事件：

$( "ul" ).sortable({
   update: function(event, ui) { 
     var order = $(this).sortable('serialize');
     console.info(order);
   }
});

然后您可以使用“序列化”方法来提取更新的项目顺序。要实现此功能，一个要求是每个列表项的 ID 都包含下划线，因此您需要将 HTML 更新为：

<ul>
   <li id="position_1">a</li>
   <li id="position_2">b</li>
   <li id="position_3">c</li>
</ul>