如何获取当前正在排序的jQuery UI Sortable元素的特定属性数组？

你现在遇到的问题是，直接调用$(".topic_keywords").sortable("toArray")时，jQuery会默认选取匹配选择器的第一个元素，所以只能拿到第一个ul的排序结果。要获取当前正在操作的那个sortable容器的数组，我们可以利用jQuery UI Sortable自带的事件来解决。

解决方案：利用stop事件获取当前排序的容器 #

当用户完成排序操作（鼠标松开）时，Sortable的stop事件会被触发，此时事件处理函数里的this就指向刚刚完成排序的那个.topic_keywords容器。我们可以在这个事件里调用toArray方法来获取该容器内的有序属性数组。

修改后的代码如下：

// 初始化所有sortable容器，并绑定stop事件
$(".topic_keywords").sortable({
  stop: function(event, ui) {
    // this 指向当前完成排序的ul元素
    var currentKeywordOrder = $(this).sortable("toArray", { attribute: 'data-id' });
    console.log("当前排序的元素ID数组：", currentKeywordOrder);
  }
});

$(".box-item").draggable();

为什么这样可行？ #

• stop事件是排序操作结束时触发的，此时我们能拿到最终的排序结果
• 事件处理函数中的this上下文就是当前被操作的sortable容器，完美区分页面上多个.topic_keywords元素
• 调用$(this).sortable("toArray")只会针对当前这个容器执行，不会再拿到第一个元素的结果

如果你需要在排序过程中（而不是结束后）获取实时的排序状态，可以把事件换成sort，不过大多数场景下stop事件更符合需求，因为它对应最终的排序结果。

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