change order divs with jQuery

Question

aaa
bbb
ccc

Is poss

Answer 1

Just use insertAfter like the previous answer said

http://jsfiddle.net/cmVyM/68/

var eerste = $('.one');
var tweede = $('.two');
var derde = $('.three');

tweede.insertAfter(derde);
eerste.insertAfter(tweede);

Answer 2

Just do $('.one').insertAfter('.three');

Answer 3

You can do it by this

var obj = $('.test.two');

obj.after(obj.prev());

so, div one and div two will change their's position.

I hope it can help you.

Answer 4

Sounds like you want to move the first div after the last.

$.fn.insertAfter inserts the matched elements after the parameter:

$(".test.one").insertAfter(".test.three");

http://jsfiddle.net/rP8EQ/

Edit: If you want a more general solution of adding the first to last, without resorting to the explicit classes:

var tests = $('.test');
tests.first().insertAfter(tests.last());

Answer 5

$("#botao").click(function(){       

$("#a3").insertBefore("#a1");   

}); 

<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>

<div>
<a id="botao">altera</a>
</div>

See: http://jsfiddle.net/GeraldoVilger/2B6FV/

Answer 6

If you want to change the order of group of divs with same class name (eg. given below):

<div class="wrapper">
  <span class="text">First Heading</span>
  <span class="number">1</span>
</div>
<div class="wrapper">
  <span class="text">Second Heading</span>
  <span class="number">2</span>
</div>
<div class="wrapper">
  <span class="text">Third Heading</span>
  <span class="number">3</span>
</div>

You can reorder it by the following jQuery code:

$('.wrapper .number').each(function () {
  $(this).insertBefore($(this).prev('.text'));
});

https://jsfiddle.net/farhanmae/9th3drvd/