如何移動列表項目？

我有一個正常的無序列表如何移動列表項目？

<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

如何移動列表項目？

回答

相關問題