Javascript 更改数组中HTML元素的顺序，用新顺序替换DOM中的HTML元素

我有一个叫做

的
ul
。产品
，里面有一堆叫做
的
li
。产品

每个
li
上都有一个
数据id
，数据库中有产品id

我正在构建功能，以便当用户单击“上移”或“下移”时，该产品将在列表中上移或下移一个插槽

$('.move-up').click(function(event) {
  event.preventDefault();
  var shownFieldsArray = $.makeArray($('.products'));

  var currentIndex = $(shownFieldsArray).index($(event.currentTarget).parent());
  shownFieldsArray.move(currentIndex, (currentIndex - 1));

 // now I need to do something with the reordered shownFieldsArray

});

（使用函数链接到另一个SO答案）在数组原型上，获取旧值和新值并相应地移动对象

所以我的问题是：我应该如何用新的、重新排序的列表替换
$（'.products'）
的值，以便用户可以获得视觉确认？我应该删除项目并重新追加它们，还是有更好的方法来替换
.val（）
？
由于要交换的两个元素是相邻的兄弟元素，因此无需执行上述任何操作。这很容易：

$('.move-up').click(function(event) {
  event.preventDefault();
  $(this).after($(this).prev());
});

这样做的目的是在单击的项本身（）之后插入单击项的上一个同级（
.prev
）。前一个同级是DOM中已经存在的元素，因此文档中的这一条款是相关的：

如果以这种方式选择的图元插入到单个位置
在DOM的其他地方，它将被移动而不是克隆

为此，我将使用jqueryui


有了它，你可以很容易地重新订购你已经拥有的产品，然后当它们保存下来时，你只需要做一些类似的事情

var array = []
$('.products').each(function(){
  array.push($(this).attr('data-id');
});

这只是一个相当普遍的例子，我只是觉得从你的代码看，似乎你可能过于复杂。这样他们就可以很容易地按照自己的意愿对其进行排序

jQueryUI文档相当详细，您可以用它做很多事情，这是一种很好的简单方法，可以让一些更耗时的JS函数不受干扰