Расположение меню выбора на панели навигации

Question

У меня есть это требование для позиционирования строки меню, где все пункты меню размещены относительно их позиций.

Like: Опция Fist будет предоставлена ​​«All WildLife». Теперь при выборе любого пункта меню этот элемент будет размещен на первой позиции, а первая опция будет второй, где первый элемент «Вся дикая природа» всегда будет оставаться на втором месте.

HTML:

`<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>`

JS:

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

Я могу добиться этого с помощью приведенной выше логики. Я хочу поместить активное меню обратно в то место, где оно было ранее, при выборе других меню.

Случай: На странице рендеринга меню выглядит следующим образом: 1. Все WildLife 2. Kavango 3. Северо-восточная Гренландия 4. Pacific Remote 5. Papahānaumokuākea

case 1: Если щелкнуть «Pacific Remote» -> «Pacific Remote» переместится на первую позицию, а «All WildLife» - на вторую позицию.

case 2: При нажатии кнопки «Papahānaumokuākea» -> «Pacific Remote» возвращается на 4-ю позицию, сначала появляется «Papahānaumokuākea», а «All WildLife» остается прежним.

Answer 1

Я не уверен, разрешено ли вам изменять HTML, поэтому я просто пошел с JS, если вы можете, добавить индекс в HTML, и вы можете сократить JS до половины в значительной степени

Этосделано "длинным" способом, поэтому я надеюсь, что вы можете понять шаги

    $('.subpage_top_nav li').click(function(e) {
        e.preventDefault();

        /* find the element that needs to be moved */
        var $toBeMoved = $('.need-to-go-back')

        /* check if any1 actually needs to be moved */
        if($toBeMoved) { 

           /* grab his init position */
          var initPosition = $toBeMoved.attr('initial-position') 

          /* move the element there */
          $('.subpage_top_nav li:eq(' + initPosition + ')').after($toBeMoved)

          /* remove the signaling class */
          $toBeMoved.removeClass('need-to-go-back')

          /* remove the attr */
          $toBeMoved.removeAttr('initial-position') 
       }

       /* grab index */
       var index = $(this).index()

       /* save original index to know where it should be placed */
       $(this).attr('initial-position', index)

       /* add signaling class just to be easier to find it later */
       $(this).addClass('need-to-go-back')
       $(this).parent().prepend(this);
     });