使用jquery上下移动包含元素

感谢您的任何帮助，您可以提供！ 目前，我使用ui-sortable代码允许用户按顺序上下移动项目。 现在，我想给每个项目提供一组“向上”和“向下”按钮，允许用户通过单击上下移动项目。 我已经尝试过改造这些post，但我似乎错过了一些明显的东西……

jQuery Sortable Move UP / DOWN按钮 在jquery中 向上/向下 移动

我想我不会将jquery应用于正确的元素。 我的jsfiddle在这里： http ： //jsfiddle.net/kevindp78/vexw5/2/ ，代码如下。

HTML

 
 IMG1 
 
Info
 MoreInfo 
 
 
 
Change Order
 
  
 
  
 
 
 Stuff1 
 
 
 IMG2 
 
Info
 MoreInfo 
 
 
 
Change Order
 
  
 
  
 
 
 Stuff2 
 
 
 IMG3 
 
Info
 MoreInfo 
 
 
 
Change Order
 
  
 
  
 
 
 Stuff3 
  

JS

 $('up-button').click(function(){ $(this).parent('.leg').insertBefore.previous('.leg') }); $('.down-button').click(function(){ $(this).parent('.leg').insertAfter.next('.leg') }); 

Answer 1

您的代码中有几个问题要解决，所以让我们按顺序查看它们。

首先是$('up-button')它缺少了. 所以它不会选择按钮。

接下来，您使用的是parent()方法，该方法仅上升一级，而是使用parents('.leg') 。

insertBefore()是一个接受目标的方法，用于放置所选内容的位置。

previous()不是函数，而是prev()而不需要参数，因为它只选择前一个元素。

如果你结合所有这些修复，你会得到这样的东西

 $('.up-button').click(function(){ $(this).parents('.leg').insertBefore($(this).parents('.leg').prev()); }); $('.down-button').click(function(){ $(this).parents('.leg').insertAfter($(this).parents('.leg').next()); }); 

在这个编辑过的小提琴上演示http://jsfiddle.net/vexw5/6/

Answer 2

您可以尝试使用以下内容替换JS：

 $(".down").click(function () { var $parent = $(this).parents(".leg"); $parent.insertAfter($parent.next()); }); $(".up").click(function () { var $parent = $(this).parents(".leg"); $parent.insertBefore($parent.prev()); }); 

http://jsfiddle.net/vexw5/7/

这只是基础知识。 没有动画或任何东西。