How do I move div after its next div

Question

How do I move a div after its next div. For instance I have 3 different div sitting here.

<div class="div1">Div1</div>
<div class="div2">Div2</div>
<div class="div3">Div3</div>

I wan to move first div after the second div. It means div2 will be first and div1 will be second. I have bunch of same html format.

I want to execute jquery something like

$(".div1").each(function() {
    $(this).appendTo().$(this).after();
});

Let me know if this doesn't make sense.

Answer 1

you can get the .next() element, and place it .after()

or

you can .insertAfter() the .next() element

http://jsfiddle.net/kFTc5/1/

$(".div1").each(function() {
    var item = $(this);

    //either this:
    item.next().after(item);

    //or this:
    item.insertAfter(item.next());


});

Answer 2

Here is how you do cut paste operations with DOM in jQuery way.

Var temp=  $(“div1”).detach(); //Performs the cut operation
temp.insertAfter(“div2”);  //Does the paste