javascript - 对可排序元素进行排序后，如何获取包括数据属性的所有索引？

Question

我目前已经实现了 jQuery 可排序。我现在正在寻找一种方法，在每次拖放后获取一个数组中所有 2 个连接列表元素的所有索引和附加数据。该数组应如下所示:

let arrayOfObjects = [
    {
        index: 0, //Should be the index of an element
        identifier: 0, //Should be the data-id of each element
        parent_id: 0 //Should be the data-parent-id of the dropped ul
    }
]

jQuery( document ).ready( function ( $ ) {
	$( "#first, #second" ).sortable( {
		connectWith: ".sortable",
		stop: function ( event, ui ) {
      //Maybe here?
		}
	} );
} );

.wrapper {
  display: flex;
}

ul {
  padding: 0;
  flex: 1;
}

ul:first-child {
  margin-right: 20px;
}

li {
  padding: 10px;
  border: 1px solid #000000;
  margin-bottom: 6px;
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui@1.12.1/ui/widget.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-sortable@1.0.0/jquery-ui.min.js"></script>
<div class="wrapper">
    <ul id="first" class="sortable" data-parent-id="1">
        <li data-id="1" class="element">1</li>
        <li data-id="2" class="element">2</li>
        <li data-id="3" class="element">3</li>
        <li data-id="4" class="element">4</li>
        <li data-id="5" class="element">5</li>
        <li data-id="6" class="element">6</li>
    </ul>
    <ul id="second" class="sortable" data-parent-id="2">
        <li data-id="7" class="element">1</li>
        <li data-id="8" class="element">2</li>
        <li data-id="9" class="element">3</li>
        <li data-id="10" class="element">4</li>
        <li data-id="11" class="element">5</li>
        <li data-id="12" class="element">6</li>
    </ul>
</div>

我该怎么做？当我记录数组时，我期望所有元素都作为数组中的对象，并具有所有所需的参数。我尝试了很多，使用了 ui.item.index() 但没有成功。

Answer 1

我不确定你的意思 index: 0,//Should be the index of an element 在下面的示例中，index 将被设置为元素在父 ul 中的位置。

jQuery(document).ready(function($) {

  function getArr() {
    return $("li").map(function() {
      return {
        index: $(this).index(),
        identifier: $(this).data("id"),
        parent_id: $(this).parent().data("parent-id")
      }
    }).get();
  }

  let arrayOfObjects = getArr();

  console.log(arrayOfObjects);

  $("#first, #second").sortable({
    connectWith: ".sortable",
    stop: function(event, ui) {
      arrayOfObjects = getArr();
      console.log(arrayOfObjects);
    }
  });
});

.wrapper {
  display: flex;
}

ul {
  padding: 0;
  flex: 1;
}

ul:first-child {
  margin-right: 20px;
}

li {
  padding: 10px;
  border: 1px solid #000000;
  margin-bottom: 6px;
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui@1.12.1/ui/widget.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-ui-sortable@1.0.0/jquery-ui.min.js"></script>
<div class="wrapper">
  <ul id="first" class="sortable" data-parent-id="1">
    <li data-id="1" class="element">1</li>
    <li data-id="2" class="element">2</li>
    <li data-id="3" class="element">3</li>
    <li data-id="4" class="element">4</li>
    <li data-id="5" class="element">5</li>
    <li data-id="6" class="element">6</li>
  </ul>
  <ul id="second" class="sortable" data-parent-id="2">
    <li data-id="7" class="element">1</li>
    <li data-id="8" class="element">2</li>
    <li data-id="9" class="element">3</li>
    <li data-id="10" class="element">4</li>
    <li data-id="11" class="element">5</li>
    <li data-id="12" class="element">6</li>
  </ul>
</div>