移动列表项并在 jQuery 中还原它

Question

以下代码将列表项作为小屏幕宽度上的最后一个项移动：

$(document).ready(myfunction);
$(window).resize(myfunction);
function myfunction() {
    if (xs == true) {
        $('ul.page-nav-list').find('li.active').appendTo('ul.page-nav-list');
    } else {
        // how to get back to the original state
    }
}

我的问题：如何将列表项还原到大分辨率的原始状态？

我使用 Bootstrap 4 断点插件来检测分辨率。

Answer 1

像这样的东西

var orgIndex = 0;
$(function(){
  orgIndex=$('ul.page-nav-list').find('li.active').index();
  myFunction();
});
$(window).resize(myFunction);
xs=true;
function myFunction() {
  if (xs) {
    $('ul.page-nav-list').find('li.active').appendTo('ul.page-nav-list');
  } else {
    $('ul.page-nav-list').find('li.active').appendToWithIndex($('ul'),orgIndex)
  }
}
//https://stackoverflow.com/a/18593267/295783
$.fn.appendToWithIndex = function(to, index) {
  if (!to instanceof jQuery) {
    to = $(to);
  };
  if (index === 0) {
    $(this).prependTo(to)
  } else {
    $(this).insertAfter(to.children().eq(index - 1));
  }
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<ul class="page-nav-list">
  <li class="active">Active</li>
  <li>Inactive</li>
  <li>Inactive</li>
  <li>Inactive</li>
</ul>