Question

I have child divs that I’m trying to sort based on a jquery .data() value that I give them that is just a single number. This code works perfectly, but only once, after that I can’t figure out how the heck it’s sorting them. Here is a simplified version:

var myArray = $('#container div').get(); 
myArray.sort(function(x,y) {
return $(x).data('order') - $(y).data('order');
});
$('#container').empty().append(myArray);

I’ve tried so many other different methods of sorting, other plugins, etc., and I can’t get anything to work right. This is as close as I can get. I just have this running on a jquery change event.

Here is the whole thing in case I’m doing something stupid elsewhere:

$('#attorneyFilter').change(function() {
//get array of links for sorting
var myArray = $('#attorneyBlocks div').get(); 
var selectedArea = $(this).val();
//sort alphabetically when "all" is selected
if (selectedArea == 'all') {
    $('#attorneyBlocks div').show();
    myArray.sort(function(a,b) {
        return $(a).text() > $(b).text() ? 1 : -1;
    });
//filter attorneys based on practice area and then assign its order# to the div with data, getting all values from the div's class
} else {
    $('#attorneyBlocks div').hide().each(function() {
        var attorneyArea = $(this).attr('class').split(', ');
        for (var i=0;i<attorneyArea.length;i++) {
            var practiceArea = attorneyArea[i].split('-');
            if (selectedArea == practiceArea[0]) {
                $(this).show().data('order',practiceArea[1]);
            }
        }
    });
    //sort based on order, the lower the number the higher it shows up
    myArray.sort(function(x,y) {
        return $(x).data('order') - $(y).data('order');
    });
}
//append order back in
$('#attorneyBlocks').empty().append(myArray);
});

And a link to the page in question

Answer 1

Here’s a jsFiddle with this working using .detach() instead of .empty() to keep the data.

http://jsfiddle.net/shaneblake/Tn9u8/