如何在单击时将第一个列表元素与另一个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> 

点击第四个链接后的菜单:

    <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

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