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”始终保留在第二个位置吗？

示例:在页面加载时，“所有野生动物”出现在第一个位置，当我选择“东北格陵兰”时，“所有野生动物”出现在第二个位置，但当我单击“太平洋偏远地区”时，“所有野生动物”选项再次出现仍位于第二位，但第一个选项移至第三位，“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>