javascript - クリック時に最初のリスト要素を別のli要素と交換するにはどうすればよいですか

Question

リンクをクリックするたびに、親の「li」が最初のリンクと入れ替わるメニューを作成しようとしています。

これは最初のメニューです。

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

これは、4 番目のリンクをクリックした後のメニューです。

    <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

ここにフィドルのデモがあります

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