Question: I have the below jquery which prepends the clicked menu item to the top of the unordered list.

```
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

$('li').on('click', function() {
    $(this).parent().prepend(this);
});

```

What I want to have happen instead of moving it to the top of the list I want to place it after the next item I click on in the list. For example if I click on 2 then 3 the list item with the value of 2 would move after 3 in the list so the html would look like this.

```
<ul>
    <li>1</li>
    <li>3</li>
    <li>2</li>
    <li>4</li>
    <li>5</li>
</ul>

```

I have attempted to do this with the below jQuery [see fiddle](http://jsfiddle.net/mUHLA/), this works the first time I click on 2 then 3 but it doesn't work if you continue to click. How can this be achieved?

```
$('li').on('click', function() {
    var test = this;
    console.log($(this).text());
    $('li').on('click', function() {
        $(this).after(test);
    });
    //$(this).parent().prepend(this);
});

```

Answer: 
Use `.before()` and `.after()` with `.next()` and `.prev()`

```
$('ul li span:nth-of-type(1)').on('click', function() {
    $(this).parent().prev().before($(this).parent());
});

$('ul li span:nth-of-type(2)').on('click', function() {
    $(this).parent().next().after($(this).parent());
});

```

`[**Demo**](http://jsfiddle.net/zJ8hd/1/)`

So, here we go with the explanation, here am selecting the first `span` using `nth-` selectors and than onclick, we move the parent of the `span` i.e `li` before the previous `li` and the second one is the opposite of the same.

Can shorten up the above code by caching up the element like

```
$('ul li span:nth-of-type(1)').on('click', function() {
    moveup =  $(this).parent();
    moveup.prev().before(moveup);
});

$('ul li span:nth-of-type(2)').on('click', function() {
    movedown =  $(this).parent();
    movedown.next().after(movedown);
});

```

`[**Demo 2**](http://jsfiddle.net/zJ8hd/2/)`
```
$('ul li').on('click', function() {
    $(this).next().after($(this));
});

```

This will help you change the order as well