CODEWITHSUNDEEP
jqueryhtmlcssonclickpositioning
user3386779
user3386779

Reputation: 7195

change the position of the li

I want to change the position of the li in jquery I have 3 list item 

<li class="flex-active-slider">
<div class="node_id"><span>233</span></div>
 <ul>
  <li class="69"><img></li>
  <li class="233"><img></li>
  <li class="299"><img></li>
 </ul> 
</li>
<a href="#" class="flex-next">click<a>

onload second list item is in center as I expected. onload[1,2,3],on click I want to change the position of the list as [3,1,2] and next click [2,3,1] .I want to change the list as given above in click function 

 $('.flex-next').click(function(){
  //want to change in jquery
});

Upvotes: 0

Views: 2345

Answers (3)

Boddula Vamshi
Boddula Vamshi

Reputation: 1

var parent = $("div.node_id ul");
var elem1 = $("li.69");
var elem2 = $("li.233");
var elem3 = $("li.299");
$(".flex-next").click(function () {
  elem1.detach();
  elem2.detach();
  elem3.detach();
  parent.append(elem3);
  parent.append(elem1);
  parent.append(elem2);
});

Upvotes: 0

Mahpooya
Mahpooya

Reputation: 559

you can use detach on elements and then use append. like this:

var parent = $( "div.node_id ul" );
var elem1 = $( "li.69" );
var elem2 = $( "li.233" );
var elem3 = $( "li.299" );

$('.flex-next').click(function(){
    elem1.detach();
    elem2.detach();
    elem3.detach();

    parent.append(elem3);
    parent.append(elem1);
    parent.append(elem2);
});

Upvotes: 1

Mojtaba
Mojtaba

Reputation: 5002

First, you need to be able to select the ul tag.

This is the main idea. You can customize it.

$('.flex-next').click(function(){
  ul = $('#myUi');
  lis = $(ul).find('li');
  $(ul).html('');
  len = lis.length;
  $(ul).append(lis[--len]);
  for (i = 0; i< len; i++) {
  	$(ul).append(lis[i]);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
 <ul id="myUi">
  <li class="69">1</li>
  <li class="233">2</li>
  <li class="299">3</li>
 </ul> 
</li>
<a href="#" class="flex-next">click<a>

Upvotes: 1

Related Questions