목록 항목은 어떻게 이동합니까?

Question

나는 정상적인 정렬되지 않은 목록을 가지고

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

내가 목록 항목 중 하나를 클릭하면이 가능 애니메이션의 경우 제 2 위치로, 목록 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

순서가 지정되지 않은 목록 (<ul id="list">)에 id을 추가하고 두 번째 자식 다음에 추가하십시오.

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

이것은 첫 번째 이후의 요소에서만 작동하지만 예제는 jsFiddle입니다.