How can I change the order of list elements using Jquery?

Question

I have a ul li as below:

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

How can I change the order of list elements using Jquery? So that on load, the new list should look like:

<ul id="list">
        <li>2</li>
        <li>1</li>
        <li>3</li>
</ul>

Is it possible to achieve using Jquery?

Answer 1

USe like this,

$("#list li:eq(0)").before($("#list li:eq(1)"));

eq selector selects the element with index. Then you can use before() or after() to change the postion .

Fiddle

Answer 2

your jquery would be . you can use insertBefore.

$('#list').find('li:eq(1)').insertBefore('li:eq(0)');

DEMO