JQuery сортируемые обновления строки ID-ы

Question

У меня есть таблица сортировки jquery:

<ul id="sortable">
  <li class="ui-state-default 1" id="1">Item 1</li>
  <li class="ui-state-default 2" id="2">Item 2</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
  <script>
  $( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
  </script>

В настоящее время я могу просто визуально перетаскивать их, чтобы редактировать их местоположения, но их идентификаторы останутся такими же, как и до их перемещения.

Как я могу отредактировать код так, чтобы при перемещении строки идентификаторы целых таблиц устанавливались в соответствии со списком с увеличением числа идентификаторов?

Обновление: номера последовательности могут быть в идентификаторах, но также и в классе.

Answer 1

Нет необходимости указывать класс или идентификатор для отслеживания положения элементов в DOM. Их позиция как дочерний элемент списка является их позицией.

$(function() {
  $("#sortable").sortable();
  $("#sortable").disableSelection();
  
  $('button').on('click', function(){
    var $listItems = $('#sortable li');
    
    // you can have just an array.  The order of the array IS the order
    console.log( $listItems.map(function(){ return this.innerHTML}).get() );
    
    // if you want to make it more fancy, you can put the order in the array
    console.log(
      $listItems.map(function(index, element){
        return { index: index, value: element.innerHTML };
      }).get()
    );
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<ul id="sortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>
<button>Save</button>