Javascript 移动可排序div后获取jQuery排序顺序

我已经使用jQuery的可排序特性创建了一个水平看板。我现在需要将新的排序顺序发送到后端，我很难弄清楚如何准确地捕获新的排序顺序

在HTML标记中，id是对象的主键，数据排序是当前排序顺序

我想我需要两种不同的功能。一个用于在行顺序更改时过帐，另一个用于在行中的项目更改时过帐

这段代码为我提供了我移动的项的id和新排序位置，但我不知道如何获取父项或其同级中的所有div

$(function() {
    $(".swim-lane-wrapper").sortable({
        axis: "Y",
        handle: ".category-card",
        connectWith: ".swim-lane-wrapper",

        update: function(event, ui) {
            console.log(ui.item.context.children["0"].id)
            console.log(ui.item.index())
        },
    });
});

这是我的建议

还有一个片段：

$function{ $.swim-lane-wrapper.sortable{ 轴：Y， 句柄：。类别卡， 连接：。泳道包装器， 更新：functionevent，ui{ console.logui }, } }; $function{ $.item行包装器 .可排序{ 连接方式：。项行包装器， 更新：functionevent，ui{}， } .禁止选择； }; .游泳道包装{} .游泳道{ 显示：内联块； 空白：nowrap； 浮动：左； 宽度：100%； 身高：100%； 边框：1px纯灰； 填充物：5px； 利润底部：3倍； } .分类卡{ 显示：内联块； 空白：nowrap； 浮动：左； 背景色：FFF3CC； 边框：DFBC6A 1px实心； 宽度：200px； 高度：85px； 线高：85px； 右边距：10px； 盒影：2PX2PX999； 光标：移动； } .类别文本{ 填充：0px 8px 0px 8px； 字体大小：12px； 空白：正常； 文本对齐：居中； 垂直对齐：中间对齐； 身高：80% } .商品卡{ 显示：内联块； 垂直对齐：顶部； 背景色：edf3ff； 边框：6d71db 1px实心； 最小宽度：100px； 高度：85px； 线高：85px； 右边距：10px； 盒影：2PX2PX999； 光标：移动； } .项目案文{ 填充：0px 8px 0px 8px； 字体大小：12px； 空白：正常； 文本对齐：居中； 垂直对齐：中间对齐； 身高：80% } 第一类 项目11 项目12 项目13 第2类 项目21 项目22 项目23

---

我们可以在更新函数中使用以下语法访问父级及其子级： 请参阅JS代码中的注释

$function{ $.swim-lane-wrapper.sortable{ 轴：Y， 句柄：。类别卡， 连接：。泳道包装器， 更新：functionevent，ui{ /*在这里修改*/ var parent=ui.item.parent； $parent.find'.category card'.eachFunction I{ elm的console.logID，i，：，$this.attrid； }; }, } }; $function{ $.item行包装器 .可排序{ 连接方式：。项行包装器， 更新：functionevent，ui{}， } .禁止选择； }; .游泳道包装{} .游泳道{ 显示：内联块； 空白：nowrap； 浮动：左； 宽度：100%； 身高：100%； 边框：1px纯灰； 填充物：5px； 利润底部：3倍； } .分类卡{ 显示：内联块； 空白：nowrap； 浮动：左； 背景色：FFF3CC； 边框：DFBC6A 1px实心； 宽度：200px； 高度：85px； 线高：85px； 右边距：10px； 盒影：2PX2PX999； 光标：移动； } .类别文本{ 填充：0px 8px 0px 8px； 字体大小：12px； 空白：正常； 文本对齐：居中； 垂直对齐：中间对齐； 身高：80% } .商品卡{ 显示：内联块； 垂直对齐：顶部； 背景色：edf3ff； 边框：6d71db 1px实心； 最小宽度：100px； 高度：85px； 线高：85px； 右边距：10px； 盒影：2PX2PX999； 光标：移动； } .项目案文{ 填充：0px 8px 0px 8px； 字体大小：12px； 空白：正常； 文本对齐：居中； 垂直对齐：中间对齐； 身高：80% } 第一类 项目11 项目12 项目13 第2类 项目21 项目22 项目23

---

在项目和父包装上放置ID。当某物被移动时，存储它的父项和排序顺序。然后，当您构建页面时，您有一个父级来放置项目以及这些项目的顺序。我知道您在做什么，但我如何循环通过与此匹配的元素：？@pheeper我更新了我的答案。我希望那是你想要的！这是我的作品，谢谢。我只需要添加一个计数器，这样我就可以捕获

---

排序顺序。随着更改，循环现在看起来是这样的：$parent.find'.category card'.eachfunctioni{…}@pheeper我很高兴这有帮助根据你的评论，我对代码做了一些修改。干杯