0

我有一个ul被叫.products，里面是一堆li被叫的.product。

每个li人都有一个data-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

});

Move是 Array 原型上的一个函数（使用该函数链接到另一个 SO 答案），它采用旧值和新值并相应地移动事物。

所以我的问题是：我应该如何$('.products')用新的、重新排序的列表替换 的值，以便用户可以得到视觉确认？我应该删除这些项目并重新附加它们还是有更好的替代品.val()？

4

2 回答 2

0

为此，我将使用 jQuery UI

在 jquery ui 中排序

有了这个，您可以轻松地重新订购您已有的产品，然后当他们保存您时，只需执行类似的操作。

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

这只是一个相当普遍的示例，我只是从查看您的代码中感觉到您可能过于复杂了。这样他们就可以很容易地按照自己的意愿对其进行排序。

jQuery UI 文档相当详细，你可以用它做很多事情，这是一种很好且简单的方法，可以让一些更耗时的 JS 函数摆脱困境。

于 2013-08-12T23:05:21.750 回答
0

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

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

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

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

于 2013-08-12T22:59:31.547 回答