jquery - 旋转列表位置

Question

我在列表中有 5 个元素。我想将第一个和最后一个元素保持在同一位置，并且需要将元素列表作为 slider 交换。

jQuery(document).ready(function($){
 $('.flex-next').click(function(){
  $('.thumbnailIcon').each(function(index, item){
  	var fourthLi = $(item).find("li:nth-child(4)");
    var secondLi = $(item).find("li:nth-child(2)");
	 $(secondLi).before(fourthLi);
  });

 });
$('.flex-prev').click(function(){
  $('.thumbnailIcon').each(function(index, item){
   	var fourthLi = $(item).find("li:nth-child(1)");
    var secondLi = $(item).find("li:nth-child(2)");
	  $(secondLi).after(fourthLi);
  });

 });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent flex-active-slider">
<div class="node_id"><span>233</span></div>
<ul class="thumbnailIcon">
  <li>left 0</li>  
  <li class="69"> 1</li>
  <li class="233">2</li>
  <li class="299"> 3</li>
  <li>right 4</li>  
</ul> 
</li>
<li class="parent">
<div class="node_id"><span>2</span></div>
<ul class="thumbnailIcon">
  <li>left 0</li>  
  <li class="69">1</li>
  <li class="233">2</li>
  <li class="299">3</li>
  <li>right 4</li>  
</ul> 
</li>
<a  class="flex-prev">prev<a>
<a  class="flex-next">next<a>

如果我单击下一个按钮 1、2、3 会按预期正常滚动。我尝试使用“后”按钮代替“上一个”按钮来反转交换。它工作不正常。

Answer 1

这是您正在寻找的行为吗？

jQuery(document).ready(function($){
 $('.flex-next').click(function(){
  $('.thumbnailIcon').each(function(index, item){
  	var fourthLi = $(item).find("li:nth-child(4)");
    var secondLi = $(item).find("li:nth-child(2)");
	 $(secondLi).before(fourthLi);
  });

 });
$('.flex-prev').click(function(){
  $('.thumbnailIcon').each(function(index, item){
   	var fourthLi = $(item).find("li:nth-child(2)");
    var secondLi = $(item).find("li:nth-child(4)");
	  $(secondLi).after(fourthLi);
  });

 });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent flex-active-slider">
<div class="node_id"><span>233</span></div>
<ul class="thumbnailIcon">
  <li>left 0</li>  
  <li class="69"> 1</li>
  <li class="233">2</li>
  <li class="299"> 3</li>
  <li>right 4</li>  
</ul> 
</li>
<li class="parent">
<div class="node_id"><span>2</span></div>
<ul class="thumbnailIcon">
  <li>left 0</li>  
  <li class="69">1</li>
  <li class="233">2</li>
  <li class="299">3</li>
  <li>right 4</li>  
</ul> 
</li>
<a  class="flex-prev">prev<a>
<a  class="flex-next">next<a>