交換清單項目的位置

我想更改清單項目的位置。我有5個列表項目第1和第5個項目是上一個和下一個按鈕。我想交換列表項的位置。交換清單項目的位置

我想保留第1個和第5個項目的位置，因爲它需要交換第2，第3個和第4個列表項。默認情況下，我希望以第三項爲中心（28），然後點擊下一步按鈕以'27'爲中心，下一次點擊想要以'26'爲中心再按'28'。

現在位置工作不正常。

jQuery(document).ready(function($) { 
 
     var node_id = 28; 
 
     $('.thumbnailIcon').each(function(index, item) { 
 
      $(item).find('.' + node_id).insertAfter($(item).find('li:eq(1)')); 
 
     }); 
 
$('.flex-next').click(function() { 
 
    $('.thumbnailIcon').each(function(index, item) { 
 
\t \t \t var fourthLi = $(item).find("li:nth-child(4)"); 
 
\t \t \t var thirdLi = $(item).find("li:nth-child(3)").addClass("animated slideInLeft",1000); 
 
\t \t \t var firstLi = $(item).find("li:nth-child(4)").addClass("animated fadeInRight",1000); 
 
\t \t \t var secondLi = $(item).find("li:nth-child(2)").addClass("animated slideInRight",1000); 
 
\t \t \t $(secondLi).before(fourthLi); 
 
     }); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content__teaser col-md-12"> 
 
\t \t \t <ul class="thumbnailIcon flex-direction-nav"> 
 
     <li class="flex-nav-prev"><a class="flex-prev" href="#">Previous</a></li> 
 
     <li class="26 animated fadeInRight">26</li> 
 
     <li class="28 animated slideInRight">28</li> 
 
     <li class="27 animated slideInLeft">27</li> 
 
     <li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li></ul> \t \t </div>

來源

2017-05-08 user3386779

[簡單的jQuery分頁]的可能的複製（http://stackoverflow.com/questions/10034724/simple-jquery-pagination） – mxr7350

@ mxr7350 - 不，這是不是重複。 – Pugazh

@Pugazh他正在嘗試分頁，對不對？ – mxr7350

我希望這是你想要的。

jQuery(document).ready(function($) { 
 
    var list = $('.thumbnailIcon'); 
 
    var firstItem, secondItem, thirdItem; 
 
    updateItemVariables(); 
 
    
 
    $('.flex-next').click(function() { 
 
    thirdItem.after(firstItem); 
 
    
 
    updateItemVariables(); 
 
    }); 
 
    
 
    function updateItemVariables() { 
 
    firstItem = list.find("li:nth-child(2)"); 
 
    secondItem = list.find("li:nth-child(3)"); 
 
    thirdItem = list.find("li:nth-child(4)"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="content__teaser col-md-12"> 
 
    <ul class="thumbnailIcon flex-direction-nav"> 
 
    <li class="flex-nav-prev"><a class="flex-prev" href="#">Previous</a></li> 
 
    <li class="26 animated fadeInRight">26</li> 
 
    <li class="28 animated slideInRight">28</li> 
 
    <li class="27 animated slideInLeft">27</li> 
 
    <li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li> 
 
    </ul> 
 
</div>

來源

2017-05-08 16:00:28 Quanta

交換清單項目的位置

回答

相關問題