如何移动列表项？

我有一个正常的无序列表

 
Item 1
 
Item 2
 
Item 3
 
Item 4
  

当我点击任何列表项时，它应该在列表中显示为第2，如果可能的话，动画到第二个位置。

我知道一个简单的解决方案是相对定位UL并绝对定位LI并设置顶部位置，但这是不可能的，因为标记的写入方式。

Answer 1

除了动画，它可以做任何事情：

 $('li').click(function() { var $this = $(this); $this.insertAfter($this.siblings(':eq(0)')); }); 

当您单击列表项时，它将在

的第一个项之后插入它，即列表中的第二个位置。

此外，您可以通过各种方式为此设置动画。 这是一个：

 $('li').click(function() { var $this = $(this), callback = function() { $this.insertAfter($this.siblings(':eq(0)')); }; $this.slideUp(500, callback).slideDown(500); }); 

这是一个有效的演示 。

Answer 2

看看第n个选择器http://api.jquery.com/nth-child-selector/它可以帮到你。

Answer 3

将id添加到无序列表（

），并在第二个子项后添加。

 $('#list li').click(function() { $(this).insertAfter("#list li:nth-child(1)"); }); 

这仅适用于第一个之后的元素，但是一个例子是在jsFiddle上 。