Sort a class with numbers in chronological order

Question

I am trying to insert div containers with class names in a box with other containers, specifying a class with numbers.

I can get the following to work correctly while the markup is already in chronological order:

http://play.meyouand.us/140418-rearrange/rearrange4a.html

However, if the markup order is in mixed or reverse chronological order, the function does not put the div containers in the exact position (since the function that I use is before ()):

http://play.meyouand.us/140418-rearrange/rearrange4b.html

Currently, I am fixated on how to solve this, because I'm not sure whether to use the pre-sorting strategy of the boxes first or if there is an existing jQuery function that can just place the div containers exactly where I need them, which made would be his perfect and easy solution. Any thoughts on strategy or methodology will be helpful!

jQuery is still ... - http://jsfiddle.net/foomarks/qM27z/2/

$('[class*=order-]').each(function() {

        /* 1. Split the classes to get an array */      
        var cl = $(this).prop('class').split(/\s+/);
        var clNumber = cl.map( function(val){
            if (val.indexOf('order-') !== -1) {  //find the match
            return val.replace( /^\D+/g, '')  // return back the number
            }
        });
        console.log("clNumber: " + clNumber[1]);

        /* 2. Presort boxes */
            /* Strategy A 
               . If this clNumber is greater than the next .order- box, append it after 
               . else do nothing 
            */

            /* Strategy B
               . Sort the array
               . then .append() the output
               . this may not work within the .each function because of sequencing
            */

        /* 3. Use the insert number to reposition */
        $(this).insertBefore('.box:nth-child('+ clNumber[1] + ')');    
    });

Answer 1

My solution is this:

• Stop using classes to store variables what for attributes data-.
• loop over roaming elements, creating an array of pairs {element, order}
• , .

: http://jsfiddle.net/qM27z/3/

var tomove =
    $('[data-order]').map(function() {
        return { element: this, order: $(this).data("order") };
    }).get().sort(function(a,b) { return a.order-b.order; });

$.each(tomove, function(i, tm) {
    $(tm.element).insertBefore('.container .box:nth-child('+tm.order+')')
});

Answer 2

, , :

jsFiddle

var ary1 = $('div[class*="order-"]');
var ary2 = $('div.container div.box');
var total = ary1.length + ary2.length;
$('.container').empty();
for (var i = 1; i <= total; i++) {
    var match = false;
    ary1.each(function () {
        var cl = $(this).prop('class').split(/\s+/);
        var clNumber = cl.map(function (val) {
            if (val.indexOf('order-') !== -1) { //find the match
                return val.replace(/^\D+/g, '') // return back the number
            }
        });
        if (clNumber[1] == i) {
            $(this).appendTo('.container');
            match = true;
        }
    })
    if (!match) $('<div class="box">Box</div>').appendTo('.container')
}