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);
});

这是working demo。

Answer 2

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

Answer 3

将id添加到无序列表（<ul id="list">），并在第二个孩子之后添加。

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

这仅适用于第一个之后的元素，但示例位于jsFiddle。

如何移动列表项？

3 个答案: