Question

我有一个名为ul的{{1}}，其中有一群.products名为li。

每个.product上都有一个li，其中包含数据库中的产品ID。

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

data-id

Move is a function（链接到函数的另一个SO答案）在Array原型上，它采用旧值和新值并相应地移动。

所以我的问题是：我应该如何用新的，重新排序的列表替换$('.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 });的值，以便用户可以获得视觉确认？我应该删除这些项目吗？ - 替换它们还是有更好的替代$('.products')？

Answer 1

由于您要交换的两个元素是相邻的兄弟元素，因此无需执行上述任何操作。这很简单：

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

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

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

Answer 2

为此，我将使用jQuery UI

sorting in jquery ui

通过这种方式，您可以轻松地对已有的产品进行重新订购，然后在他们保存时只需执行类似的操作。

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

这只是一个相当普遍的例子，我只是通过查看你的代码感觉到你可能会使它复杂化。通过这种方式，他们可以非常轻松地对其进行排序。

jQuery UI文档非常详细，你可以用它做很多事情，这是一种简单易用的方法，可以让你的JS功能更加耗时。

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

2 个答案: