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 <div> elements. Is that what you want? — user113716
– user113716, Commented May 19, 2011 at 17:45

user113716 · Accepted Answer · 2011-05-19 22:49:19Z

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, 2011 at 22:49

answered May 19, 2011 at 17:48

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kylex Over a year ago

This is the simplest and most generic version offered. Thanks!

kylex Over a year ago

Can this be generalized even further so that if there were 3 or 4 divs that they would be listed in reverse order?

user677526 Over a year ago

@user113716 Do you know if this will work with ordered list elements, without changing their numeric value?

David Thomas · Accepted Answer · 2011-05-19 18:00:51Z

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, 2011 at 18:00

answered May 19, 2011 at 17:42

David Thomas

254k53 gold badges382 silver badges421 bronze badges

2 Comments

user113716 Over a year ago

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

David Thomas Over a year ago

@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

Darin Dimitrov · Accepted Answer · 2011-05-19 17:41:48Z

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, 2011 at 17:41

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Comments

pixelbobby · Accepted Answer · 2011-05-19 17:41:47Z

0

jQuery Sortable to the rescue.

answered May 19, 2011 at 17:41

pixelbobby

4,4305 gold badges33 silver badges50 bronze badges

Comments

jerone · Accepted Answer · 2011-05-19 17:43:16Z

0

Try something like this:

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

answered May 19, 2011 at 17:43

jerone

17.1k4 gold badges42 silver badges58 bronze badges

Comments

whoabackoff · Accepted Answer · 2011-05-19 17:52:09Z

0

give each div an id and use insertBefore. Example:

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

jsFiddle

answered May 19, 2011 at 17:52

whoabackoff

1,6535 gold badges18 silver badges32 bronze badges

1 Comment

kylex Over a year ago

I like your avatar, Home Movies is fantastic.

Collectives™ on Stack Overflow

Reverse sort divs using CSS or jQuery?

6 Answers 6

3 Comments

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related