How to change li position using Jquery

Question

hello i have this code

<ul>
<li id="1">
<li id="2">
<li id="3">
<li id="4">
<li id="5">
<li id="6">
<li id="7">
</ul>

i want to make a function that foreach time the function is called the first li at the top will be the last one so the first example will look like this

<ul>
<li id="2">
<li id="3">
<li id="4">
<li id="5">
<li id="6">
<li id="7">
<li id="1">
</ul>

Thanks

Answer 1

$('li:first').appendTo('ul');

working example (click anywhere): http://jsbin.com/izize3

Answer 2

Try this:

var firstChild = $("ul > li:first-child");
firstChild.appendTo(firstChild.parent("ul"));