如何移动列表项目？

我有一个正常的无序列表如何移动列表项目？

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

当我点击任何一个列表中的项目应该出现在列表中2，如果可能的话有生第二位置。

我知道一个简单的解决方案，它可以相对定位UL并绝对定位LI并设置最高位置，但由于标记写入的方式，这是不可能的。

来源

2012-01-03 Lee Price

该做的一切，但动画：

$('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。

来源

2012-01-03 16:42:18 FishBasketGordo

作品一种享受！你知道它是否有可能为这些动画或这个我应该继续前进的东西？ – 2012-01-03 16:48:15

这取决于你想如何动画。我用一个基本的动画例子更新了我的答案。 – FishBasketGordo 2012-01-03 16:59:01

看看第ñ选择这里http://api.jquery.com/nth-child-selector/它可以帮助你。

来源

2012-01-03 16:48:05 Pirozek

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

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

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

来源

2012-01-03 17:11:17

如何移动列表项目？

回答

相关问题