Ordering Div External

Question

i have a html Page with a specific order, for instance:

    <div id="three"></div>
    <div id="two"></div>
   <div id="one"></div>

But i need order it, i can touch the html, so, the idea is use Javascript/Jquery to do that, is there a way to make that without touch the html?

This should help: http://stackoverflow.com/questions/698301/is-there-a-native-jquery-function-to-switch-elements — Etienne Perot, Jan 27 '12 at 22:40
You mean, you need to reorder the `
` elements so that they are in the order "one, two, three"? — Jordan Gray, Jan 27 '12 at 22:41
@JordanGray Exactly, i miss that part in the question, but yes, i need ordering like one, two, three — Aletz Morgan, Jan 27 '12 at 22:53

score 3 · Answer 1 · answered Jan 27 '12 at 22:47

3

for the simple answer using .before:

$('#three').before('#two');
$('#two').before('#one');

answered Jan 27 '12 at 22:47

Evan

5,975
8
34
63

André Alçada Padez · Accepted Answer · 2012-01-27T23:46:38.683

2

with jQuery:

$('#one').parent().append($('#three')).append($('#one')).append('#two');

this way you have, div 3, 1, 2 in that order.
You are selecting one of the divs, and selecting it's parent. then you append them at the order you want.

if you want to use pure javascript:

var parent = document.getElementById('one').parentNode;
parent.appendChild(document.getElementById('three'));
parent.appendChild(document.getElementById('one'));
parent.appendChild(document.getElementById('two'));

now, assuming you have a lot of divs, i will assume #one til #ten:
you can create an array, with the ids ordered as you wish, for example:

var order = ['ten', 'eight', 'six', 'four', 'two', 'nine', 'seven', 'five', 'three', 'one'];
for(var i = 0; i < order.length; i++){
    parent.appendChild(document.getElementById(order[i]));
}

is this what you're looking for?

edited Jan 27 '12 at 23:46

answered Jan 27 '12 at 22:45

André Alçada Padez

10,987
24
67
120

thx for the answer it works, but in my case also i have some more divs ex:
three

two

one

test

tests

testes
All of them are created in asp and parse in the html, the asp some time sends unordered items, so i dont know the exactly position of them, if i use the parent() to set the position some time it not will be in the correct position – Aletz Morgan Jan 27 '12 at 23:12
so, you want an easyway to order them all? – André Alçada Padez Jan 27 '12 at 23:13
no, parent refers to the container of those divs. can be another div or can be the body, for example – André Alçada Padez Jan 27 '12 at 23:17
1

Little note, you need an extra closing parenthesis here: `parent.appendChild(document.getElementById(order[i]‸);` – Jordan Gray Jan 27 '12 at 23:45

Mattia Larentis · Answer 3 · 2012-01-27T22:53:29.940

1

yes... try to use this code:

$('#two').appendTo($('#one').parent())
$('#three').appendTo($('#two').parent())

edited Jan 27 '12 at 22:53

answered Jan 27 '12 at 22:47

Mattia Larentis

192
1
9

that way, you are placing them inside of each other – André Alçada Padez Jan 27 '12 at 22:49

Ordering Div External

3 Answers3