リストアイテムの位置をスワップ

Question

リストアイテムの位置を変更したいと思います。私は5番目のリスト項目は1番目と5番目の項目は前と次のボタンです。私はリスト項目の位置を交換したい。

1位と5位の項目の位置をそのまま保ちたいので、2位、3位および4位のリスト項目を交換する必要があります。デフォルトでは、3番目のアイテムを中心（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>