交换清单项目的位置

Question

我想更改清单项目的位置。我有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>

Answer 1

我希望这是你想要的。

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>