Question

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

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按预期滚动正常。我试图使用'after'为'prev'按钮来反转交换。它工作错误。

Answer 1

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

＆＃13;

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);
  });

 });

});

＆＃13;

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

＆＃13;

Answer 2

我认为在您点击事件中的prev按钮，您应该将索引值更改为4，

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

目前，您将1传递给它，因此，仅在前2个元素之间进行交换。

旋转列表位置

2 个答案: