Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

change order divs with jQuery

Tags:

<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.

like image 785
David Apshid Avatar asked Oct 02 '11 19:10

David Apshid


People also ask

How to change order of div in jQuery?

To change order of divs with jQuery, we can use the insertAfter method. to add 3 divs. Then we take the first div and insert it after the 3rd with: const tests = $('.

How do you change a div?

If you need to completely replace the HTML content of the div , use the innerHTML property. Copied! const div = document. getElementById('container'); // ✅ Change (replace) the text with HTML div.


1 Answers

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()); 
like image 141
Zirak Avatar answered Nov 25 '22 11:11

Zirak