如何将可排序无序列表中<li>的顺序转换为JavaScript数组？

原生JavaScript实现 #

直接获取当前列表的所有<li>元素，提取它们的id并按顺序组成数组：

// 选中目标列表下的所有列表项
const listItems = document.querySelectorAll('#sortable1 li');
// 转换为按顺序排列的ID数字数组
const sortedIds = Array.from(listItems).map(item => parseInt(item.id, 10));
console.log(sortedIds); // 示例输出：[1, 4, 2, 5, 3]

jQuery UI Sortable 适配方案 #

因为你的列表使用了connectedSortable类（属于jQuery UI Sortable组件），可以在排序结束时自动获取最新的ID数组：

$(function() {
  $("#sortable1").sortable({
    // 排序结束后触发的回调
    stop: function() {
      const sortedIds = $("#sortable1 li").map(function() {
        // 提取每个列表项的ID并转为数字
        return parseInt(this.id, 10);
      }).get(); // 将jQuery对象转为普通数组
      console.log(sortedIds); // 输出当前排序对应的ID数组
    }
  }).disableSelection();
});

说明：

• 两种方法都会按当前列表的视觉顺序提取<li>的id，若需要字符串类型的ID，去掉parseInt即可。
• jQuery方案会在用户拖拽调整顺序后自动触发，适合实时获取最新的排序结果。

内容的提问来源于stack exchange，提问作者user3535901