将选定的菜单选项移到第一个位置

Question

我有一个顶部的菜单栏，上面有多个菜单项。

​

$('.subpage_top_nav li').click(function(e) {
  e.preventDefault();
  $(this).parent().prepend(this);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='subpage_top_nav'>
  <ul>
    <li>
      <a href='#'>
        <center>All WildLife</center>
      </a>
    </li>
    <li>
      <a href='#'>
        <center>Kavango</center>
      </a>
    </li>
    <li>
      <a href='#'>
        <center>Northeast Greenland</center>
      </a>
    </li>
    <li>
      <a href='#'>
        <center>Pacific Remote</center>
      </a>
    </li>
    <li>
      <a href='#'>
        <center>Papahānaumokuākea </center>
      </a>
    </li>
  </ul>
</div>

​

我想把第一个值'All WildLife‘放在第二个位置。

例如:在页面加载'All WildLife‘出现在第一位置，当我选择“东北格陵兰”，然后’所有的WildLife‘进入第二位，但再次当我点击’太平洋遥控器‘时，“所有wildLife”选项保持在第二，但第一个选项移动到第三，’太平洋遥控器‘移动到第一。

谢谢你的帮助。

Answer 1

为了满足您的需要，您可以在li中添加一个类，该类包含“所有野生生命”，然后先添加一个类，然后再添加一个prepend()，然后再将单击的项放到prepend()中。这样，在选择之后，它总是会出现在列表的第二位。试试这个：

​

var $all = $('.subpage_top_nav li.all');

$('.subpage_top_nav li').click(function(e) {
  e.preventDefault();
  $(this).parent().prepend($all).prepend(this);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='subpage_top_nav'>
  <ul>
    <li class="all">
      <a href='#'>
        <center>All WildLife</center>
      </a>
    </li>
    <li>
      <a href='#'>
        <center>Kavango</center>
      </a>
    </li>
    <li>
      <a href='#'>
        <center>Northeast Greenland</center>
      </a>
    </li>
    <li>
      <a href='#'>
        <center>Pacific Remote</center>
      </a>
    </li>
    <li>
      <a href='#'>
        <center>Papahānaumokuākea </center>
      </a>
    </li>
  </ul>
</div>

​