обменять товар в списке

Question

У меня есть 5 элементов в списке. Я хочу сохранить первый и последний элемент в том же положении и вам нужно поменять список элементов как слайдер.

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>

Я хочу изменить положение всего элемента списка thumbnailIcon в положении, как показано на рисунке. onload [0,1,2,3,4] (рабочий), по щелчку Я хочу изменить положение списка как [0,3,1,2,4] и следующий щелчок [0,2,3,1 , 4]. Я хочу изменить список, как указано выше, в функции click.Is это возможно.

Answer 1

Я надеюсь, что этот код может помочь вам.

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

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

 
    \t var fourthLi = $(thumbnails).find("li:nth-child(4)"); 
 
    var secondLi = $(thumbnails).find("li:nth-child(2)"); 
 
\t 
 
    //reversed 
 
\t $(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" />

Answer 2

Вы можете сделать это так:

var a = [0, 1, 2, 3, 4]; 
 
$('#view').text(a.toString()); 
 

 
function changeArray() { 
 
    // get the first and lest elements, and remove them from array 
 
    var first = this.a[0] 
 
    var last = this.a[this.a.length - 1]; 
 
    a = this.a.slice(1, this.a.length - 1); 
 

 
    // manipulate the internal array 
 
    a.unshift(this.a.pop()); 
 
    
 
    // restore the first and last elements 
 
    a.unshift(first); 
 
    a.push(last); 
 
    
 
    $('#view').text(a.toString()); 
 
} 
 

 

 

 
    
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="view"></div> 
 
<button type="button" onclick="changeArray()">change array</button>