如何移动列表项？

Question

我有一个正常的无序列表

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

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

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

Answer 1

除了动画,它可以做任何事情:

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

当您单击列表项时,它会将其插入到列表中的第一个项目之后<ul>,即列表中的第二个位置.

此外,您可以通过各种方式为此设置动画.这是一个:

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

这是一个有效的演示.