Question

I have code like:

<div class="a">Main</div>
<div class="b">1</div>
<div class="b">2</div>
<div class="b">3</div>
<div class="a">Another</div>
<div class="b">4</div>
<div class="b">5</div>

And I want the output to be:

<div class="a">Main</div>
<div class="b">3</div>
<div class="b">2</div>
<div class="b">1</div>
<div class="a">Another</div>
<div class="b">5</div>
<div class="b">4</div>

Am trying to use the following but it does not work correctly:

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

$('.b').reverseOrder();

Because it reverses all the b divs to the top. Am a little lost. Any idea how to achieve this?

I do not wish to modify the code to add more divs inside it to contain them as it breaks other code of mine (not provided here).

I think I have to use nextAll and nextUntil functions.

Answer 1

First find last div with class “a”. Then move the current div.

$.fn.reverseOrder = function() {
    var $Last;
    // get all divs
    var $All = $(this).parent().find('> div');
    return this.each(function(iIndex1, oElem1) {
        $Last = null;
        // for each div search last div with class 'a'
        $All.each(function(iIndex2, oElem2) {
            if ($(oElem2).hasClass('a')) {
                // if it has the class 'a', remember this div
                $Last = $(oElem2);
            } else if (oElem2 == oElem1) {
                // if current element has reached, break the each loop
                return false;
            }
        });
        // if a div with class 'a' could be found ...
        if ($Last !== null) {
            // move current b element after the last div with class 'a'
            $Last.after(oElem1);
        }
    });
};

$('.b').reverseOrder();

Also see my jsfiddle.

=== UPDATE ===

Here an alternative:

$.fn.reverseOrder = function() {
    return this.each(function(iIndex1, oElem1) {
        // get the previous element until it's empty or has the class 'a'
        var $Last = $(oElem1).prev();
        while($Last.length > 0 && !$Last.hasClass('a')) {
            $Last = $Last.prev();
        }
        // if it has a class 'a' move the current element
        if ($Last.hasClass('a')) {
            $Last.after(oElem1);
        }
    });
};

$('.b').reverseOrder();

Also see my next jsfiddle.