Can't get javascript/jquery to sort elements correctly more than one time

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

It might help to know what's getting the div's out of order so that this code needs to run again... — ShaneBlake
– ShaneBlake, Commented May 26, 2011 at 21:12

ShaneBlake · Accepted Answer · 2011-05-26 21:41:17Z

1

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

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

answered May 26, 2011 at 21:41

ShaneBlake

11.1k2 gold badges28 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

joren Over a year ago

Gave it a shot, here is some updated code that I created on jsfiddle with your code jsfiddle.net/Tn9u8/6 Example, change the dropdown to business & tax, first two names are David Herzer and David Batista, which is correct as well as the rest of the list. Change it to family law and then back to business org & tax, and we have a whole different sorted list. I don't get it, argh!

joren Over a year ago

I started using console log to grab each div's data('order') value here wickens.pageonewebsolutions.com/our-people/attorneys The order values are staying correct, so that part of my code is fine. I can't find a pattern, the numbers are all over the place, and then sometimes they go back to the right order after bouncing around enough.

joren Over a year ago

Eventually figured it out, the data values from hidden divs were screwing with my sorting, so I changed my sorting code to only pay attention to :visible divs and that did the trick. Doh! Thanks for your help everyone.

Hogan Over a year ago

@joren - yes I found that just as you did (see my answer), also did you fix the issue with myArray? You can see the problem if you pick all after picking something else.

Hogan · Accepted Answer · 2011-05-26 22:56:10Z

1

Thanks for the link to the site, that made it clear.

It seems to me you never clear out the data from the prior time. You hide everything but maybe something like this will solve your problem (here I set everything hidden to the bottom, you can clear it or use a different value -- as long as it is not the same as any sort key):

 $('#attorneyBlocks div').hide().data('order',999999).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]);
            }
        }
    });

Also, the code on the server is missing the 2nd line you have above:

var myArray = $('#attorneyBlocks div').get();

The problem is the change event is tied to the original items. After the sort you make all new items. They don't have any event tied to them. You will need to use .live()

edited May 26, 2011 at 22:56

answered May 26, 2011 at 21:06

Hogan

70.7k10 gold badges83 silver badges119 bronze badges

1 Comment

joren Over a year ago

Hey Hogan, thanks for the answer, but the change event is just on a dropdown somewhere else on the page, it's actually never being affected by this code so using .live() doesn't make a difference.

joren · Accepted Answer · 2011-05-27 14:19:49Z

0

Eventually figured it out, the data values from hidden divs were screwing with my sorting, so I changed my sorting code to only pay attention to :visible divs and that did the trick. Doh! Thanks for your help everyone.

answered May 27, 2011 at 14:19

joren

1,1552 gold badges11 silver badges22 bronze badges

Collectives™ on Stack Overflow

Can't get javascript/jquery to sort elements correctly more than one time

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related