旋转列表位置

Question

我在列表中有5个项目。我想保持第一个和最后一个项目在同一位置，并需要将项目列表作为滑块交换。

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

 
}); 
 
$('.flex-prev').click(function(){ 
 
    $('.thumbnailIcon').each(function(index, item){ 
 
    \t var fourthLi = $(item).find("li:nth-child(1)"); 
 
    var secondLi = $(item).find("li:nth-child(2)"); 
 
\t $(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滚动罚款expected.I试图“之后”逆转使用调换“下一页” button.It工作的错误。

Answer 1

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

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

 
}); 
 
$('.flex-prev').click(function(){ 
 
    $('.thumbnailIcon').each(function(index, item){ 
 
    \t var fourthLi = $(item).find("li:nth-child(2)"); 
 
    var secondLi = $(item).find("li:nth-child(4)"); 
 
\t $(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>

Answer 2

我想为上一个按钮点击事件，你应该索引值更改为4，

var fourthLi = $(item).find("li:nth-child(4)"); 

目前，要传递1到它，因此，对换的第一两个元素之间发生只要。