jQuery - sort DIVs by className

Question

I have a list of DIVs, like this :

<div id="list">
    <div class="cat1-4.2"><div>4</div></div>
    <div class="cat3-3.3"><div>3</div></div>
    <div class="cat2-5.1"><div>5</div></div>
    <div class="cat3-1.5"><div>1</div></div>
    <div class="cat3-2.4"><div>2</div></div>
</div>

and I want to sort them, using jQuery

Server-side, I can define the wanted order, and include this order in the class names :

catX-4.2

I want to be able to call either the first order (in my example this DIV will be in the 4th position), or the second order (it will be in the 2nd position) : that explains the "4.2"

So if I call OrderDIV(1) I will have this :

1
2
3
4
5

and if I call OrderDIV(2) I will have this :

5
4
3
2
1

(I will need to add more orders, like : catX-4.2.5.6.2)

Thank you VERY MUCH for your help!

Answer 1

You changed the requirements mid way ... just like a true client. Updated version with some comments attached. Just to confirm, there are two "configurable" variables at the front.

classPrefix: the "prefix" unique to the class used to determine sort order ('cat' in this case) listElementSelector: the jQuery selector used to obtain the list to sort.

function OrderDIV(position)
{
    var classPrefix = 'cat';
    var listElementSelector = '#list';

    // -- Decrement the position to make it 0 based
    position--;

    // -- Parses the "position" section from the given classes, and
    //    then the position at the specific index requested.
    var parsePosition = function(classes, pos) {
        // -- Split the "classes" into an array.
        var classList = classes.split(' ');

        // -- Determine which of the "classes" starts with the prefix we want.
        for( var i in classList )
        {
            if( classList[i].substr(0, classPrefix.length) == classPrefix )
            {
                // -- Strip out the positions section, and split it.
                var positions = classList[i].split('-')[1].split('.');

                // -- return the one position we want
                return positions[pos];
            }
        }

        // -- In the event that we don't find the class we're looking for ...
        return -1;
    }

    // -- Compares div A to div B, and returns an indicator of the order
    var funcSort = function(a, b) {
        // -- Use "parsePosition" to determine the sortable criteria from the classes.
       var compA = parsePosition($(a).attr('class'), position);
       var compB = parsePosition($(b).attr('class'), position);
       return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
    };

    // -- Select the list element.
    var list = $(listElementSelector);

    // -- Select the list items, and return them as an array.
    var listitems = list.children('div').get();

    // -- Sort the array using the "funcSort".
    listitems.sort(funcSort);

    // -- Go through each of the array entries, and "append" them to the list container
    //   (this moves them to the 'back' of the list)
    $.each(listitems, function(idx, itm) { list.append(itm); });
}