使用jQuery来旋转订单

Question

我有这样的HTML：

<ul id="list">
  <li class="item">a</li>
  <li class="item">b</li>
  <li class="item">c</li>
</ul>

我想用jQuery完成的是将订单轮换。因此，在一次调用之后，生成的html将是：

<ul id="list">
  <li class="item">c</li>
  <li class="item">a</li>
  <li class="item">b</li>
</ul>

接着......

<ul id="list">
  <li class="item">b</li>
  <li class="item">c</li>
  <li class="item">a</li>
</ul>

等等。实现这个目标的正确方法是什么？

Answer 1

弹出列表中的最后一项并将其添加到列表中，如下所示：

var $list = $('#list');
$list.find('.item:last').prependTo($list);

这是micro-optimization的情况，但只要我们必须创建2个jquery对象（并且没有简单的方法），首先声明列表，然后使用它来限制搜索具有find的项目的范围应该比使用2个选择器以文档作为搜索范围更快。

Answer 2

$("#list li:last").insertBefore("#list li:first")

DEMO

Answer 3

获取最后一项并在其前面添加。

$('#list li').last().prependTo('#list');

DEMO