Order Unordered Group of Div's by ID or Class with jQuery

Is it possible to order a group of Div's by id or class using jQuery? Here's my code:

<div id="product_categories">
  <div class="wpsc_categorisation_group" id="categorisation_group_49">
        <a href="http://africa.local/store/african-dolls/">African Dolls</a>
  </div>
  <div class="wpsc_categorisation_group" id="categorisation_group_47">
        <a href="http://africa.local/store/anklets/">Anklets</a>
  </div>
  <div class="wpsc_categorisation_group" id="categorisation_group_5">
        <a href="http://africa.local/store/bracelets/">Bracelets</a>
 开发者_开发知识库 </div>
  <div class="wpsc_categorisation_group" id="categorisation_group_11">
        <a href="http://africa.local/store/childrens-jewelry/">Children's Jewelry</a>
  </div>
  <div class="wpsc_categorisation_group" id="categorisation_group_13">
        <a href="http://africa.local/store/clearance/">Clearance</a>
  </div>
  <div class="wpsc_categorisation_group" id="categorisation_group_8">
        <a href="http://africa.local/store/cross-necklaces/">Cross Necklaces</a>
  </div>
</div>

I know the code is kind messed up but WP E-Commerce is generating it and won't allow me to order it the way I want. Any thoughts?

Thanks.

Although there's a few others already up, I'll throw this up too! This one uses regular expressions to strip out the number.

var container = $("#product_categories");
var ele = container.children("div.wpsc_categorisation_group");

ele.detach().sort(function (a, b) {
    var a = $(a).attr('id').match(/\d+/);
    var b = $(b).attr('id').match(/\d+/);
    return a-b;
});
container.append(ele);

Hope it helps!

I came up with a rough draft. This code can most likely be cleaned up a lot, but here you go

Demo : http://jsfiddle.net/3paUL/

$('#sort').click(function() {
    var ids = [];
    var divs = {};
    $('#product_categories div.wpsc_categorisation_group').each(function() {
        var numPart = parseInt($(this).attr('id').substr($(this).attr('id').lastIndexOf('_') + 1));
        ids.push(numPart);
        divs[numPart] = $(this);

    });
    ids.sort(sortNumber);
    $('#product_categories').html('');

    for (id in ids) {
        $('#product_categories').append(divs[ids[id]]);
    }
});

function sortNumber(a, b) {
    return a - b;
}

How it works : It looks at the IDs of the DIV elements inside and sorts them. Since all your DIV elements follow the pattern of an _ and a number, I take off that number and use that as the index.

I would use .sort and so something like this:

var ids = $(".wpsc_categorisation_group").map(function(){
    return parseInt(this.id.replace('categorisation_group_',''));
}).toArray().sort();

$.each(ids, function(){
    $('#categorisation_group_'+this).prependTo("#product_categories");
});

Check my test case on jsFiddle;

You can use sortElements plug-in: http://james.padolsey.com/javascript/sorting-elements-with-jquery/

$('.wpsc_categorisation_group').sortElements(function(a, b){
    return parseInt(a.id.replace('categorisation_group_', ''), 10) > parseInt(b.id.replace('categorisation_group_', ''), 10) ? 1 : -1;
});

here you can find jsFiddle test case

Here you go!

function orderDivs()
{
    var divs = [];
    $("#product_categories .wpsc_categorisation_group").each(function() {
        divs.push($(this));
    });
    // sort using a custom compare function
    divs.sort(byID);
    // empty the old contents
    $("#product_categories").empty();
    // put the ordered divs back in the same container
    for (var i=0; i < divs.length; i++) {
        $("#product_categories").append(divs[i]);
    }
}
function byID(a, b)
{
    // extract number from id
    var a_id_num = parseInt($(a).attr("id").split("_")[2], 10);
    var b_id_num = parseInt($(b).attr("id").split("_")[2], 10);
    // compare with the other
    if(a_id_num > b_id_num) {
        return 1;
    } else {
        return 0;
    }
}

$(function() {
    // ready, go!
    orderDivs();
});

A working sample on JSFiddle: http://jsfiddle.net/PnDLw/