交换列表项的位置答案

【问题标题】：Swap the position of list item交换列表项的位置
【发布时间】：2017-05-08 14:08:18
【问题描述】：

我想改变列表项的位置。我有 5 个列表项，第 1 项和第 5 项是上一个和下一个按钮。我想交换列表项的位置。

我想保持第 1 项和第 5 项的位置不变，需要交换第 2、3 和第 4 个列表项。默认情况下，加载时我想将第 3 个项目设为中心 (28)，然后单击下一个按钮希望将“27”设为中心，然后在下一次单击时将“26”设为中心并再次设为“28”。

现在位置不能正常工作。

jQuery(document).ready(function($) {
       var node_id = 28;
       $('.thumbnailIcon').each(function(index, item) {
            $(item).find('.' + node_id).insertAfter($(item).find('li:eq(1)'));
        });
 $('.flex-next').click(function() {
   $('.thumbnailIcon').each(function(index, item) {
			var fourthLi = $(item).find("li:nth-child(4)");
			var thirdLi = $(item).find("li:nth-child(3)").addClass("animated slideInLeft",1000);
			var firstLi = $(item).find("li:nth-child(4)").addClass("animated fadeInRight",1000);
			var secondLi = $(item).find("li:nth-child(2)").addClass("animated slideInRight",1000);
			$(secondLi).before(fourthLi);
        });
 });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content__teaser col-md-12">
			 <ul class="thumbnailIcon flex-direction-nav">
       <li class="flex-nav-prev"><a class="flex-prev" href="#">Previous</a></li>
       <li class="26 animated fadeInRight">26</li>
       <li class="28 animated slideInRight">28</li>
       <li class="27 animated slideInLeft">27</li>
       <li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li></ul>		  </div>

【问题讨论】：

Simple jQuery Pagination的可能重复
@mxr7350 - 不。这不是重复的。
@Pugazh 他正在尝试进行分页，对吧？
不，我不是要制作 paginaton。这个概念完全不同
是的，但是在分页中OP希望将当前页面定位为中心元素。（在示例中，您可以在27之前看到28）

标签： javascript jquery html css

【解决方案1】：

我希望这是你想要的。

jQuery(document).ready(function($) {
  var list = $('.thumbnailIcon');
  var firstItem, secondItem, thirdItem;
  updateItemVariables();
  
  $('.flex-next').click(function() {
    thirdItem.after(firstItem);
    
    updateItemVariables();
  });
  
  function updateItemVariables() {
    firstItem = list.find("li:nth-child(2)");
    secondItem = list.find("li:nth-child(3)");
    thirdItem = list.find("li:nth-child(4)");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="content__teaser col-md-12">
  <ul class="thumbnailIcon flex-direction-nav">
    <li class="flex-nav-prev"><a class="flex-prev" href="#">Previous</a></li>
    <li class="26 animated fadeInRight">26</li>
    <li class="28 animated slideInRight">28</li>
    <li class="27 animated slideInLeft">27</li>
    <li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li>
  </ul>
</div>

【讨论】：