使用 jquery UI sortable 對多個 UL 和 LI 元素進行排序

Question

我正在使用 jquery UI sortable 對多個 ul 和 li 元素進行排序，html 代碼如下所示，

<ul class="nav navbar-nav groupsList ui-sortable" id="groupsList">

  <li class="dropdown group ui-sortable-handle" id="group1">
    <a href="#" class="dropdown-toggle mdl_active" data-toggle="dropdown" role="button" aria-expanded="false">Introduction <span class="caret"></span></a>
    <ul id="groupItems1" class="dropdown-menu itemsList ui-sortable" role="menu">
       <li class="handle ui-sortable-handle" data-id="6"><a href="#">Module 1 topic1</a></li>
       <li class="handle ui-sortable-handle" data-id="7"><a href="#">Module 1 topic 2</a></li>
       <li class="handle ui-sortable-handle" data-id="14" style=""><a href="#">module 2 MCQ challenge</a></li><li class="handle ui-sortable-handle" data-id="10"><a href="#">INterview with Boman irani</a></li>
       <li class="handle ui-sortable-handle" data-id="11"><a href="#">New topic newly added</a></li>
       <li class="handle ui-sortable-handle" data-id="17"><a href="#">Game 2</a></li>
     </ul>
   <div class="clearfix"></div>
   </li>

   <li class="dropdown group ui-sortable-handle" id="group2">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Discover <span class="caret"></span></a>
    <ul id="groupItems2" class="dropdown-menu itemsList ui-sortable" role="menu">                                                          
     <li class="handle ui-sortable-handle" data-id="15"><a href="#">MCQ Challenge 55</a></li>
     <li class="handle ui-sortable-handle" data-id="4" style=""><a href="#">Module 2 Topic</a></li>
     <li class="handle ui-sortable-handle" data-id="5"><a href="#">Module 2 Topic 2</a></li>
     <li class="handle ui-sortable-handle" data-id="13"><a href="#">MCQ Challenge</a></li>
     <li class="handle ui-sortable-handle" data-id="16"><a href="#">Game1</a></li>
   </ul>
   <div class="clearfix"></div>
  </li>

  <li class="dropdown group ui-sortable-handle" id="group3">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Define <span class="caret"></span></a>
    <ul id="groupItems3" class="dropdown-menu itemsList ui-sortable" role="menu">
     <li class="handle ui-sortable-handle" data-id="1"><a href="#">Topicc 1</a></li>
     <li class="handle ui-sortable-handle" data-id="2"><a href="#">Topic 2</a></li>
     <li class="handle ui-sortable-handle" data-id="3"><a href="#">Test</a></li>
   </ul>
   <div class="clearfix"></div>
  </li>

</ul>

Jquery 代碼是，

$('#groupsList').sortable();
$('.itemsList').sortable({
    connectWith: $('.itemsList'),
    update: function( event, ui ) {

    var sortData = $( ".itemsList" ).sortable('toArray',{ attribute: 'data-id'});
    console.log(sortData);
    }
});

現在我想在一個數組或模塊中獲取 id 數組。 但上面的代碼只顯示第一個 ul 數組數據，如下所示，

[“6”、“10”、“7”、“11”、“14”、“17”]

我想要這個數組中的所有三個模塊數據 ID。 注意：上面的 ul 是動態的，我用 laravel/php for loop 寫了這個

Answer 1

這可以使用 vanilla JavaScript 和 DOM API 輕松完成。請參閱代碼中的注釋以獲取逐步說明：

 // Use querySelectorAll to get all matching elements based on the class name // Note the spread syntax used to spread the querySelectorAll result into an Array const sortedIds = [...document.querySelectorAll('.ui-sortable-handle')] // Filter out any matches that dont have a data-id attribute.filter(el =>..el.dataset.id) // Extract only the dataset.id of each element to a new array.map(el => el.dataset.id) // Sort the array of dataset,id elements in ASC order;sort((a. b) => a - b); console.log(sortedIds)

 <ul class="nav navbar-nav groupsList ui-sortable" id="groupsList"> <li class="dropdown group ui-sortable-handle" id="group1"> <a href="#" class="dropdown-toggle mdl_active" data-toggle="dropdown" role="button" aria-expanded="false">Introduction <span class="caret"></span></a> <ul id="groupItems1" class="dropdown-menu itemsList ui-sortable" role="menu"> <li class="handle ui-sortable-handle" data-id="6"><a href="#">Module 1 topic1</a></li> <li class="handle ui-sortable-handle" data-id="7"><a href="#">Module 1 topic 2</a></li> <li class="handle ui-sortable-handle" data-id="14" style=""><a href="#">module 2 MCQ challenge</a></li> <li class="handle ui-sortable-handle" data-id="10"><a href="#">INterview with Boman irani</a></li> <li class="handle ui-sortable-handle" data-id="11"><a href="#">New topic newly added</a></li> <li class="handle ui-sortable-handle" data-id="17"><a href="#">Game 2</a></li> </ul> <div class="clearfix"></div> </li> <li class="dropdown group ui-sortable-handle" id="group2"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Discover <span class="caret"></span></a> <ul id="groupItems2" class="dropdown-menu itemsList ui-sortable" role="menu"> <li class="handle ui-sortable-handle" data-id="15"><a href="#">MCQ Challenge 55</a></li> <li class="handle ui-sortable-handle" data-id="4" style=""><a href="#">Module 2 Topic</a></li> <li class="handle ui-sortable-handle" data-id="5"><a href="#">Module 2 Topic 2</a></li> <li class="handle ui-sortable-handle" data-id="13"><a href="#">MCQ Challenge</a></li> <li class="handle ui-sortable-handle" data-id="16"><a href="#">Game1</a></li> </ul> <div class="clearfix"></div> </li> <li class="dropdown group ui-sortable-handle" id="group3"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Define <span class="caret"></span></a> <ul id="groupItems3" class="dropdown-menu itemsList ui-sortable" role="menu"> <li class="handle ui-sortable-handle" data-id="1"><a href="#">Topicc 1</a></li> <li class="handle ui-sortable-handle" data-id="2"><a href="#">Topic 2</a></li> <li class="handle ui-sortable-handle" data-id="3"><a href="#">Test</a></li> </ul> <div class="clearfix"></div> </li> </ul>