26
<div class="test one">aaa</div>
<div class="test two">bbb</div>
<div class="test three">ccc</div>

Is possible change order this divs with jQuery? I would like receive:

<div class="test two">bbb</div>
<div class="test three">ccc</div>
<div class="test one">aaa</div>

i can use only jQuery

LIVE: http://jsfiddle.net/cmVyM/

I will make this only one - if document is ready.

David Apshid
  • 311
  • 1
  • 4
  • 10
  • 1
    Sounds like a job for jQuery UI sortable. – Madara's Ghost Oct 02 '11 at 19:19
  • A couple examples of sorting divs in this earlier answer of mine: http://stackoverflow.com/questions/7623819/looking-for-a-javascript-solution-to-reorder-divs/7623918#comment9258056_7623918. – jfriend00 Oct 02 '11 at 19:24
  • Same as this question: http://stackoverflow.com/questions/1363650/javascript-moving-element-in-the-dom – dan360 May 08 '13 at 22:20

8 Answers8

85

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());
Zirak
  • 38,920
  • 13
  • 81
  • 92
  • This doesn't work when there are a group of divs with the same class name. Say 3 divs with `test-one`, 3 with `test-two` and another 3 with `test-three`. Any suggestions for such a case? – Flame of udun Apr 17 '15 at 13:24
  • @VineetKaushik What do you want to happen, for all `test-one` to be inserted after `test-three`, or a specific one? If the former that already happens, if the latter then choose more specific selectors. – Zirak Apr 17 '15 at 13:28
9

Here is a simple example with navigate buttons.

HTML

<ul>
  <li>1 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
  <li>2 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
  <li>3 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
  <li>4 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
  <li>5 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
  <li>6 <a class='up' href='#'>up</a> <a class='down' href='#'>down</a></li>
</ul>

Javascript with JQuery

$('.up').on('click', function(e) {
    var wrapper = $(this).closest('li')
    wrapper.insertBefore(wrapper.prev())
})
$('.down').on('click', function(e) {
    var wrapper = $(this).closest('li')
    wrapper.insertAfter(wrapper.next())
})

Try it here: https://jsfiddle.net/nguyenvuloc/vd105gst

Loc Nguyen
  • 356
  • 3
  • 6
5

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

deviousdodo
  • 9,177
  • 2
  • 29
  • 34
4
$("#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/

Geraldo Vilger
  • 65
  • 2
  • Just incase this answer is found at a later date can you add some basic comments on how this works. Thanks. – Shawn Feb 10 '14 at 20:46
2

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);
Wannes
  • 355
  • 4
  • 15
2

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/

Farhan Erooth
  • 111
  • 5
1

appendTo also is an alternative solution for this with JQuery.

var nav = $('.one').clone(true);
$('.one').remove();
nav.appendTo('.three');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="test one">aaa</div>
<div class="test two">bbb</div>
<div class="test three">ccc</div>
Gayan Chinthaka
  • 521
  • 6
  • 5
0

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.

Yann叶
  • 185
  • 1
  • 3