어떻게 첫 번째 목록 요소를 다른 li 요소로 바꿔 넣을까요?

Question

링크를 클릭 할 때마다 처음으로 부모 "li"가 바뀌는 메뉴를 만들려고합니다. 어떻게 할 수 있습니까? 이?

이 초기 메뉴입니다 :

<ul class="top-menu"> 
    <li class="fourth-element"><a href="/">Fourth</a><li> 
    <li class="second-element"><a href="/">Second</a><li> 
    <li class="third-element"><a href="/">Third</a><li> 
    <li class="first-element"><a href="/">First</a><li> 
    </ul> 

여기

Answer 1

가 i를 FIDDLE DEMO

<ul class="top-menu"> 
    <li class="first-element">First</li> 
    <li class="second-element">Second</li> 
    <li class="third-element">Third</li> 
    <li class="fourth-element">Fourth</li> 
</ul> 

$.fn.exchangePositionWith = function(selector) { 
    var other = $(selector); 
    this.after(other.clone()); 
    other.after(this).remove(); 
}; 

$(document.body).on('click', 'ul.top-menu li' ,function(){ 
    var pos = $(this).closest('li').index(); 
    $("ul.top-menu li:eq("+pos+")").exchangePositionWith("ul.top-menu li:eq(0)"); 
    return false; 
}); 

Answer 2

$('.top-menu li').live('click', function() { 
    $(this).remove(); 
    $(this).prependTo('.top-menu'); 
});