jquery - 交换列表中的元素

Question

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

var i=0;
$('.flex-next').click(function(){
   i=i+2;
   alert(i);
  $(".thumbnailIcon li:eq(1)").before($(".thumbnailIcon li:eq(i)"));
});

<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</li>  
      <li class="69">1</li>
      <li class="233">2</li>
      <li class="299">3</li>
      <li>right</li>  
    </ul> 
    </li>
    <li class="parent">
    <div class="node_id"><span>222</span></div>
    <ul class="thumbnailIcon">
      <li>left</li>  
      <li class="69">1</li>
      <li class="233">2</li>
      <li class="299">3</li>
      <li>right</li>  
    </ul> 
    </li>
    <a href="#" class="flex-next">click<a>
    <li class="parent">
    <div class="node_id"><span>333</span></div>
    <ul class="thumbnailIcon">
      <li>left</li>  
      <li class="69">1</li>
      <li class="233">2</li>
      <li class="299">3</li>
      <li>right</li>  
    </ul> 
    </li>

我想更改所有缩略图图标列表项在所示位置的位置。 onload [0,1,2,3,4](工作)，单击我想将列表的位置更改为[0,3,1,2,4]，然后单击[0,2,3,1 ,4] 。我想在点击功能中更改上面给出的列表。是否可行。

Answer 1

希望这段代码能帮到你。

function changeAllOrder(){
  $('.thumbnailIcon').each(function(index, item){
  	var fourthLi = $(item).find("li:nth-child(4)");
    var secondLi = $(item).find("li:nth-child(2)");
		
    //normal
		$(secondLi).before(fourthLi);
  });
}

function changeSingleOrder(){
	event.preventDefault();
	var thumbnails = $(event.currentTarget).prev().find("ul");

  	var fourthLi = $(thumbnails).find("li:nth-child(4)");
    var secondLi = $(thumbnails).find("li:nth-child(2)");
	
  //reversed
	$(fourthLi).after(secondLi);
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.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"><img> 1</li>
  <li class="233"><img> 2</li>
  <li class="299"><img> 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"><img>1</li>
  <li class="233"><img>2</li>
  <li class="299"><img>3</li>
  <li>right 4</li>  
</ul> 
</li>
<a href="" onclick="changeSingleOrder()" class="flex-next">click<a>
<li class="parent">
<div class="node_id"><span>3</span></div>
<ul class="thumbnailIcon">
  <li>left</li>  
  <li class="69"><img></li>
  <li class="233"><img></li>
  <li class="299"><img></li>
  <li>right</li>  
</ul> 
</li>
<input type="button" onclick="changeAllOrder()" value="Change Order" />