Change position of a list item
I want to change the position of a list item. I have 5 list items of 1st and 5th position - previous and next. I want to change the position of a list item.
I want to keep the position of the 1st and 5th items as they are and you need to swap the positions of the 2nd, 3rd and 4th lists. By default on load I want to make the 3rd element as the center (28) and then click the "click" button to make the "27" in the center and the next time I want to make the "26" in the center and again "28".
Now the position is not working as expected.
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) {
var fourthLi = $(item).find("li:nth-child(4)");
var thirdLi = $(item).find("li:nth-child(3)").addClass("animated slideInLeft",1000);
var firstLi = $(item).find("li:nth-child(4)").addClass("animated fadeInRight",1000);
var secondLi = $(item).find("li:nth-child(2)").addClass("animated slideInRight",1000);
$(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">
<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>
+3
source to share
1 answer
Hope this is what you want.
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>
+1
source to share