Inversing DOM with jQuery

Question

Input:

<content>
   <dom id=1>a</dom>
   <dom id=2>b</dom>
   <dom id=3>c</dom>
   <dom id=4>d</dom>
</content>

Output:

<content>
   <dom id=4>d</dom>
   <dom id=3>c</dom>
   <dom id=2>b</dom>
   <dom id=1>a</dom>
</content>

I'm looking for a function (if exists) like this:

$('content').inverse();

Answer 1

Something like this would work:

$(​$("content dom").get().reverse()).appendTo("content");​​​​​​​​

You can test it out here, or if you like the reverse flavor:

$("content").append($("content dom").get().reverse());​

Try that version here.

Answer 2

Use jQuery Reverse Order plugin

jQuery Reverse Order uses jQuery to reverse the order of DOM elements on your page.

Example:

$('#items p').reverseOrder();

The plugin is quite simple:

(function($) {
    $.fn.reverseOrder = function() {
        return this.each(function() {
            $(this).prependTo( $(this).parent() );
        });
    };
})(jQuery);

Try it out with this jsFiddle

Answer 3

By using toArray() function in jQuery1.9, you can dump dom elements in to an array, and use reverse() function to accomplish your goal!

$('content dom').toArray().reverse()