jquery - 改变li的位置

Question

我想改变li在jquery中的位置我有 3 个列表项

<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 第二个列表项如我所料位于中心。 onload[1,2,3]，单击时我想将列表的位置更改为 [3,1,2] 然后单击 [2,3,1]。我想在单击中更改上面给出的列表功能

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

Answer 1

首先，您需要能够选择 ul 标签。

这是主要思想。您可以自定义它。

$('.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>