JQuery sort()

11 Feb
2009

JQuery. Write less, do more

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:

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.

13 Responses to JQuery sort()

Avatar

Martijn Laarman

May 8th, 2009 at 7:16 am

Good job on a lean solution, jquery really needs a sort method like this one :)

Avatar

mclemmens

August 13th, 2009 at 12:41 pm

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

Avatar

styson

August 25th, 2009 at 9:50 am

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

Avatar

Oleg.K

October 5th, 2009 at 9:10 am

I’m impressed. You’r ninja!

Avatar

Ressol

October 12th, 2009 at 5:20 pm

it’s awesome, thanks for your solution.

Avatar

Tom

October 13th, 2009 at 8:09 am

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,

Avatar

slade73

October 16th, 2009 at 6:22 am

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.

Avatar

iskra

December 11th, 2009 at 1:01 am

Works beautifully… unlike most plugin functions I had this thing working in less than 2 seconds!

Avatar

Benny

January 4th, 2010 at 5:20 am

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 ??

Avatar

daniel

March 22nd, 2010 at 5:28 am

thanks for this

Avatar

Tobi

July 21st, 2010 at 5:31 am

thanks also ;)

Avatar

Bill

July 21st, 2010 at 6:45 am

You’re welcome. :)

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

Avatar

Scott

August 30th, 2010 at 11:58 am

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!

Comment Form

top