jqueryhtmlcssonclickpositioning

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
});

Solution

  • 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>