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

Question

I've currently implemented a jQuery sortable. I'm looking now for a way to get all indexes and additional data of all 2 connected list elenents within one array after each drag'n'drop. The array should looks like this:

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>

How can I do this? When I log my array, I'm expecting all elements as objects in my array with all needed parameters. I've tried a lot, used ui.item.index() but wasn't successful.

Answer 1

I'm not sure what you mean by index: 0, //Should be the index of an element In the example below, index will be set to the element's position in the parent 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>

Answer 2

This will get you the object you're looking for:

const list = document.querySelectorAll("[data-id]");

const listItems = Array.from(list).map((item, i) => ({
  index: item.dataset.id,
  identifier: i,
  parent_id: item.parentNode.dataset.parentId
}));