javascript - 交换列表项的位置

Question

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

我想保持第一个和第五个元素的位置不变，需要交换第二个、第三个和第四个列表项。默认情况下，在加载时我想将第 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>

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