Question

I’ve been trying to sort my dates by ascending/descending order in jQuery but with no luck. Any idea to what is going wrong? Here is my code: http://jsfiddle.net/UdwNh/

 var itemsArray = $('div#activity_box');
    itemsArray.sort(function(a,b){
        var aTime = new Date($(a).find('#activity_date').text()).getTime();
        var bTime = new Date($(b).find('#activity_date').text()).getTime();
        return aTime - bTime;
    });

    $('#sortAsc').click(function(){
        $("#wrapper").empty();
        $(itemsArray).each(function(){
            $("#wrapper").prepend($(this));
        });
    });

    $('#sortDesc').click(function(){
        $("#wrapper").empty();
        $(itemsArray).each(function(){
            $("#wrapper").append($(this));
        });
    });​

Relevant HTML:

<input class="btn" type="button" value="Sort Ascending" id="sortAsc"/>
<input class="btn" type="button" value="Sort Descending" id="sortDesc"/>

<div id="wrapper">
    <ul>
    <li class='item'><div id='activity_date'>01/10/2012</div>
    <div id='activity_box'>
    <div id='activity_text' class='windowClass2'>...text here...</div>
    </div></li><li class='item'><div id='activity_date'>04/10/2012</div>
    <div id='activity_box'>
    <div id='activity_text' class='windowClass2'>...text here...</div>
    </div></li><li class='item'><div id='activity_date'>10/10/2012</div>
    <div id='activity_box'>
    <div id='activity_text' class='windowClass2'>...text here...</div>
    </div></li><li class='item'><div id='activity_date'>16/10/2012</div>
    <div id='activity_box'>
    <div id='activity_text' class='windowClass2'>...text here...</div>
    </div></li>
    </ul>
</div>

Answer 1

There are several issues with that code.

1. You’re using the same id value on more than one element. id values must be unique on the page.

   To fix it, use a class value instead, or a data-* attribute, or anything else that’s allowed to occur more than once on a page.

2. You’re calling sort on a jQuery instance. jQuery has no documented sort function. It may have an undocumented one, but if so, you have no idea what it does. It’s certainly doesn’t make sense to assume it will rearrange DOM elements.

   To fix it, you’ll have to write your own function for that (it’s not complicated), or find a plug-in that does it for you.

3. Even if sort did work, the date strings you’re passing into new Date(string) are in the form 20/10/2012, 17/10/2012, and such. That isn’t a format that new Date(string) is documented to understand. The only string format that new Date(string) is documented to understand is a simplified form of ISO-8601, which doesn’t look like that. And in fact, new Date("20/10/2012") fails on Chrome and probably other browsers.

   To fix it, you’ll need to get the dates another way. You could store the milliseconds-since-the-Epoch value on the elements as a data-* attribute and then use it directly. Or you could parse the date strings you have yourself. If they’re always in that dd/mm/yyyy format, parsing the individual parts into numbers is trivial, and then you can pass the resulting numbers for the year, month, and day into new Date(year, month, date). (Remember that months start with 0 = January.)

4. You’re putting in a closing </li> in at the outset, where there’s no opening <li>.

   To fix it, don’t do that. 🙂