Reverse sort divs using CSS or jQuery?

Question

I have the following:

<div>
    <div>
        <span>Fe</span>
        <span>Fi</span>
        <span>Fo</span>
        <span>Fum</span>
    </div>


    <div>
        <span>He</span>
        <span>Hi</span>
        <span>Ho</span>
        <span>Hum</span>
    </div>
</div>

And I would like the inner divs to display in reverse order like so:

He Hi Ho Hum
Fee Fi Fo Fum

You're example result doesn't really reverse the sort order. It just swaps the order of the two `
` elements. Is that what you want? — user113716, May 19 '11 at 17:45
Alright, I [posted an answer](http://stackoverflow.com/questions/6062630/reverse-sort-divs-using-css-or-jquery/6062732#6062732) that does that. — user113716, May 19 '11 at 17:48

user113716 · Accepted Answer · 2011-05-19T22:49:19.993

8

var first = $('div > div:first-child');

first.appendTo(first.parent());

EDIT: To deal with several elements, you can do this:

$('div > div').each(function() {
    $(this).prependTo(this.parentNode);
});

Live Example: http://jsfiddle.net/xB4sB/

edited May 19 '11 at 22:49

answered May 19 '11 at 17:48

user113716

318,772
63
451
440

This is the simplest and most generic version offered. Thanks! – kylex May 19 '11 at 17:56
Can this be generalized even further so that if there were 3 or 4 divs that they would be listed in reverse order? – kylex May 19 '11 at 21:11
@user113716 Do you know if this will work with ordered list elements, without changing their numeric value? – Jun 28 '12 at 03:59

David Thomas · Answer 2 · 2011-05-19T18:00:51.843

2

One method is:

$('div span:contains("He")').parent().insertBefore('div > div:eq(0)');

JS Fiddle demo.

Conversely, you could also just CSS to simulate the 'reversed' order:

div > div {
    width: 48%;
    float: right;
}

div > div:nth-child(odd) {
    background-color: #ffa;
}

div > div:nth-child(even) {
    background-color: #0f0;
}

JS Fiddle demo.

References:

edited May 19 '11 at 18:00

answered May 19 '11 at 17:42

David Thomas

249,100
51
377
410

Your jQuery solution works visually, but I'm pretty sure OP wants to keep them in the same outer div. Currently it is placing it outside the outer. You'd need to change the selector to `.insertBefore('div:eq(1)')` or `.insertBefore('div > div:eq(0)')` or use `.prependTo('div:eq(0)')`. – user113716 May 19 '11 at 17:53
1

@patrick dw: thanks! That's what I meant to do, but completely forgot that they were contained...sigh. **Must** read more slowly and carefully... **edited** – David Thomas May 19 '11 at 18:00

score 1 · Answer 3 · answered May 19 '11 at 17:41

1

You could swap the two nodes using this method. Here's a live demo. Also you probably could give them unique id names to simplify the selectors.

answered May 19 '11 at 17:41

Darin Dimitrov

1,023,142
271
3,287
2,928

score 0 · Answer 4 · answered May 19 '11 at 17:41

0

jQuery Sortable to the rescue.

answered May 19 '11 at 17:41

pixelbobby

4,368
5
29
49

score 0 · Answer 5 · answered May 19 '11 at 17:43

0

Try something like this:

$($("span").remove().toArray().reverse()).appendTo("div");

answered May 19 '11 at 17:43

jerone

16,206
4
39
57

score 0 · Answer 6 · answered May 19 '11 at 17:52

0

give each div an id and use insertBefore. Example:

$('#hehihohum').insertBefore('#fefifofum');

jsFiddle

answered May 19 '11 at 17:52

whoabackoff

1,603
4
17
32

1

I like your avatar, Home Movies is fantastic. – kylex May 19 '11 at 18:05

Reverse sort divs using CSS or jQuery?

6 Answers6

Linked