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

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”排在第一位，当我选择“Northeast Greenland”时，“All WildLife”排在第二位，但当我再次单击“Pacific Remote”时，“All wildLife”选项仍然排在第二位，但第一个选项移至第三位，而“Pacific Remote”移至第一位。

谢谢你的帮助。

Answer 1

要实现您的要求，您可以向包含“All Wildlife”的 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>