交換列表中的項目

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]（working），點擊我想改變列表的位置爲[0,3,1,2,4]，然後點擊[0,2,3,1 ，4]。我想在上面的點擊函數中改變列表。它是可行的。

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>