Using jQuery to Rotate the order

Question

I have html like this:

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

What I'd like to accomplish using jQuery is to have the order rotated. So after one call the resulting html would be:

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

And after another ...

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

And so on. What is the proper way to accomplish this?

Give it a go and come back to us when (and if) you have issue with what you are trying :) — GillesC, Sep 03 '14 at 20:21
http://stackoverflow.com/questions/10014752/jquery-arrange-li-order-by-clicking-on-a-link — Jonathan Anctil, Sep 03 '14 at 20:21
try this http://stackoverflow.com/questions/14555415/how-to-randomly-sort-list-items — HADI, Sep 03 '14 at 20:22

Faust · Answer 1 · 2014-09-03T20:34:27.380

3

Pop the last item off the list and prepend it to the list like this:

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

This is a case of micro-optimization, but as long as we have to create 2 jquery objects (and there's no easy way around that), declaring the list first, then using it to limit the scope of the search for the item with find should be faster than using 2 selectors with the document as the search scope.

edited Sep 03 '14 at 20:34

answered Sep 03 '14 at 20:23

Faust

15,130
9
54
111

You don't have to remove it to make it work: $("#list li:last-child").prependTo("#list"); – drskullster Sep 03 '14 at 20:26

score 1 · Answer 2 · answered Sep 03 '14 at 20:23

1

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

DEMO

answered Sep 03 '14 at 20:23

Barmar

741,623
53
500
612

score 1 · Accepted Answer · answered Sep 03 '14 at 20:24

1

Get the last item and prepend it.

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

DEMO

answered Sep 03 '14 at 20:24

Kyle Needham

3,379
2
24
38

Using jQuery to Rotate the order

3 Answers3