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> 

这是单击第四个链接后的菜单：

    <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

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

Answer 2

这是小提琴演示

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