JQuery sort()

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:

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

Old code:

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

, , , ,

  • 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
  • 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 :-)

Powered by WordPress. Designed by Woo Themes