Geek asks and answers

Reverse sorts sorted using CSS or jQuery?

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 be displayed in reverse order as follows:

He Hi Ho Hum
Fee Fi Fo Fum

+3
source share
6 answers
var first = $('div > div:first-child');

first.appendTo(first.parent());

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

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

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

+8
source

One of the methods:

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

JS Fiddle demo .

Conversely, you can simply just CSS to mimic the “reverse” 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 .

Literature:

+2
source

You can exchange two nodes using this method . Here's a live demo . In addition, you could probably give them unique name names to simplify the selector.

+1
source

jQuery Sortable for salvation.

0
source

Try something like this:

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

give each div an id and use insertBefore. Example:

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

jsFiddle

0
source

More articles:


All Articles