JQuery sort()

By Bill on February 11, 2009 in JavaScript, JQuery

JQuery. Write less, do more

Today I was trying to figure out how to sort a set of list item elements alphabetically using JQuery. Seems simple enough but after searching around I couldn’t find any ready made solution. The best I could find was JQuery Table Sort (which is a nice sorting package but not what I was looking for). After playing around for a bit, this is what I came up with:

UPDATE:
As Tom point out in the comments, beginning with jQuery 1.3.2 this can be further simplified to the following.

function sortAlpha(a,b){
    return a.innerHTML.toLowerCase() &gt; b.innerHTML.toLowerCase() ? 1 : -1;
};

$('ol li').sort(sortAlpha).appendTo('ol');

function sortAlpha(a,b){

return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase() ? 1 : -1;

};

$('ol li').sort(sortAlpha).appendTo('ol');

Old code:

jQuery.fn.sort = function() {
   return this.pushStack( [].sort.apply( this, arguments ), []);
 };

function sortAlpha(a,b){
    return a.innerHTML &gt; b.innerHTML ? 1 : -1;
};

$('ol li').sort(sortAlpha).appendTo('ol');

jQuery.fn.sort = function() {

return this.pushStack( [].sort.apply( this, arguments ), []);

};

function sortAlpha(a,b){

return a.innerHTML > b.innerHTML ? 1 : -1;

};

$('ol li').sort(sortAlpha).appendTo('ol');

Short and sweet. The result is a in place sort based off the innerHTML alphabetically.

dom, innerHTML, JavaScript, JQuery, sort

PHP5 Email Validation

Customize your Amazon S3 Url

http://www.mpdreamz.nl Martijn Laarman

Good job on a lean solution, jquery really needs a sort method like this one 🙂
mclemmens

Wow — thank you! Just what I needed. I appreciate your simple approach.
styson

Thanks for the post. It helped me get a task done today. http://blogs.dovetailsoftware.com/blogs/styson/archive/2009/08/25/using-jquery-to-sort-a-list.aspx
Oleg.K

I’m impressed. You’r ninja!
Ressol

it’s awesome, thanks for your solution.
Tom

Actually, with jQuery 1.3.2 this is unecessary.

All you have to do is create your custom sorting function.

function sortAlpha() { … }

$(“ol.tosort li”).sort(sortAlpha).appendTo(“ol.sorted”);

—

This is because in jQuery-1.3.2, the sort method uses the built in array sort.

@285: sort: [].sort,
http://slade73.blogspot.com slade73

Thanks! I needed to be able to sort a wrapped set by element ID, and this helped me do it. Will be mentioning this post on my blog, http://slade73.blogspot.com.
iskra

Works beautifully… unlike most plugin functions I had this thing working in less than 2 seconds!
http://www.odinsoft.dk Benny

I have been using this for some time now and it works RELY good on my site.
There is one problem. FF have been updater and don’t support this way any more. I have send in a bug to FF development, but it can take forever to be solved.
Have a look at http://www.odinsoft.dk/test/Dropdowntest.html in both FF and IE.
Can there be done a work around on this problem ??
daniel

thanks for this
Tobi

thanks also 😉
Bill

You’re welcome. 🙂

@benny – I can’t seem to load your link.
Scott

I want to thank you for this code. I was using TinySort, but was having some issues with it. Using this method I was able to write my own code and replace the 2kb tinysort include with under 30 total lines of code. Thanks!
Marcelous

How would I get the code below to sort on name. I have been trying for days. Any help would greatly be appreciated.

$(document).ready(function() {
$.getJSON(“http://app.ecwid.com/api/v1/208317/categories?format=json”, function(cats){
$.each(cats, function(index, cat){
$(‘#navlist’).append(‘‘+cat.name+’‘);

});

});
});
http://twitter.com/lostincode Bill

Hi Marcelous, try this:

function sortJsonName(a,b){
return a.name > b.name ? 1 : -1;
};
$(document).ready(function() {
$.getJSON(“http://app.ecwid.com/api/v1/208317/categories?format=json”, function(cats){
cats = $(cats).sort(sortJsonName);
$.each(cats, function(index, cat){
$(‘#navlist’).append(”+cat.name+”);

});
});
});
L Mazz

Most Excellent!
Abc

too cool .. I haved this…thanks
AJ

Very nice. Elegant chunk of code that saved me a lot of hassle.
Htran

I’d just like to thank Bill for such an elegant solution and it WORKS perfectly
mamzelle

Thank you, it really useful :)!
http://www.facebook.com/AdamTReineke Adam Reineke

Your sort function is case sensitive, and will sort A,B,..,Y,Z,a,b,..y,z. If you want a case insensitive sort, add .toUpperCase() after the .innerHTML calls.
Aaron

To get consistent sorting in IE8 when the values were equal, I had to add the a.innerHTML.toLowerCase() == b.innerHTML.toLowerCase() check and return 0 in that case (otherwise, every sort attempt jumbled things around).
Rasmus Schultz

Based on this and a couple other sources, I came up with a very simple jQuery plugin that lets you specify the sort order (ascending/descending) as well as providing an optional function to acquire the value to sort by:

http://jsfiddle.net/mindplay/H2mrp/

I included two examples: sorting a list, and reverse-sorting the rows in a table 🙂

Navigation