Question

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

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

因此，当用户用a交换c时，该位置也会更新。我试图使用.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++;
            });
        }
    });
});

Example link

Answer 2

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

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

var position = $（'li＃b'）。index（）;

Answer 3

您希望利用Sortable“update”事件：

$( "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>

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

3 个答案: