JQuery UI получить отсортированную позицию элемента LI в UL

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

Вы хотите воспользоваться преимуществом сортируемого события «обновление»:

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

Затем вы можете использовать метод "serialize", чтобы получить обновленный порядок элементов. Для этого необходимо, чтобы идентификаторы каждого элемента списка содержали подчеркивание, поэтому вам нужно обновить HTML-код до:

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

Answer 3

Вы пробовали : 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 ();