在對可排序元素進行排序后，如何獲取包括數據屬性在內的所有索引？

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, //應該是一個元素的索引在下面的例子中， index將被設置為父ul中元素的 position 。

 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

這將為您提供您正在尋找的 object：

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
}));