Sorting class with numbers in chronological order

Question

I'm trying to insert div containers with class names into a box with other containers by defining class with numbers.

I'm able to get the following to work correctly as long as the markup is already in chronoligical order:

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

However if the markup order is in a mixed or reversed chronological order, the function doesn't position the div containers in the exact position (because the function I'm using is before()):

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

I'm currently stuck on how to solve this because I'm not sure if I should use the strategy of pre-sorting the boxes first, or if there's an existing jQuery function that can just place the div containers exactly where I need them which would make it an ideal and simple solution. Any thoughts on strategy or methodology will be helpful!

jQuery so far... - 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] + ')');    
    });

Can you post some code and markup here? Perhaps even a jsfiddle that can be manipulated? — Jay Blanchard, Apr 22 '14 at 19:17

score 4 · Accepted Answer · answered Apr 24 '14 at 20:22

My solution is this:

stop using classes to store variables; that's what data- attributes are for.
loop over the elements to be moved, creating an array of {element,order} pairs
sort the pairs into proper order
loop over the pairs doing the insert.

Working demo: 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+')')
});

Perfect! And a very elegant solution as well. Thanks! – Marc P Apr 25 '14 at 14:21 — Marc P, Apr 25 '14 at 14:21

score 1 · Answer 2 · answered Apr 22 '14 at 20:10

I have a feeling there's a cleaner way to do this, but this works:

jsFiddle example

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

Blargh, I noticed that the last line doesn't work for me because the
Box
are examples of containers with variable content, so that wouldn't work. Is there a method to store the original contents of .container and append them again? An exmaple: http://jsfiddle.net/foomarks/5fuWe/ — Marc P, Apr 23 '14 at 19:40

Sorting class with numbers in chronological order

2 Answers2