Javascript 使用jquery UI sortable对多个UL和LI元素进行排序

我正在使用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>

现在我想在一个数组或模块中获取id的数组。但上面的代码只显示第一个ul阵列数据，如下所示

<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>

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

我需要此阵列中的所有三个模块数据id。

---

注意：上面的ul是动态的，我已经使用laravel/php for loop编写了这篇文章

这可以通过香草JavaScript和domapi轻松完成。请参见代码中的注释，以了解分步说明：

//使用querySelectorAll根据类名获取所有匹配元素
//请注意用于将querySelectorAll结果分散到数组中的分散语法
const sortedIds=[…document.querySelectorAll（'.ui可排序句柄'）]
//筛选出没有数据id属性的所有匹配项
.filter（el=>！！el.dataset.id）
//仅将每个元素的dataset.id提取到新数组
.map（el=>el.dataset.id）
//按ASC顺序对dataset.id元素数组进行排序
.sort（（a，b）=>a-b）；
console.log（sortedID）