リストアイテムを移動するにはどうすればよいですか？

Question

私は可能性が第2の位置にアニメーション化する場合には、リストで2番目に表示されますリスト項目のいずれかをクリックすると、私は通常の番号なしリストに

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

を持っています。

これは、相対的にULを配置し、LIを絶対的に配置してトップポジションを設定するという簡単な解決方法を知っていますが、マークアップの書き方によっては不可能です。

Answer 1

これは、アニメーション以外のすべてん：あなたは、リストの項目をクリックすると、それはすなわち、リスト内の2番目の位置、<ul>内の最初の項目の後にそれを

$('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); 
}); 

ここにはworking demoがあります。

Answer 2

ここでn番目のセレクターをご覧くださいhttp://api.jquery.com/nth-child-selector/それはあなたを助けることができます。

Answer 3

順不同リスト（<ul id="list">）にidを追加し、2番目の子の後に追加します。

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

これは最初の後の要素のために動作しますが、例としてはjsFiddleです。