how to Sort dynamiclly created html div using jquery

Question

I have dynamically created html div using jquery , now i want to sort the div's according to date/Name. the dynamically created div are like ,

<div class="itemBox" data-date="2013-12-12 00:00:00" data-name="Simple Choker">
    ..data1.
<div>

<div class="itemBox" data-date="2013-12-12 00:00:00" data-name="Double 22"">
    ..data2.
<div>

Jquery that i have used

$.each(results, function (index, items) 
{ 
    var appendData = "";
    appendData = appendData + "<div class='itemBox' data-name='" + items.name+    "'data-date='" + items.createdDate + "'>";  
    //images are appended using Api // 
    appendData = appendData + "</div>"; 
    $(".mainDiv").append(appendData); 
}

How to do it using jquery? Do i need any plugin or function?

Where's the jQuery that's generating the output? JSFiddle please. — o--oOoOoO--o, Aug 18 '14 at 17:28
possible duplicate http://stackoverflow.com/questions/21600802/jquery-sort-list-based-on-data-attribute-value - try the solution there. — Brian Dillingham, Aug 18 '14 at 17:37
@denisol-jquery is like $.each(results, function (index, items) { var appendData = ""; appendData = appendData + "
"; //images are appended using Api // appendData = appendData + "
"; $(".mainDiv").append(appendData); — Vikas Lalwani, Aug 18 '14 at 17:38
as already mentioned, just sort `results` before generating html — charlietfl, Aug 18 '14 at 17:38
Add each element to an array with the date being the key, then you can use the array sort method before adding them to the page, good luck! — Brunis, Aug 18 '14 at 17:55

Chamika Sandamal · Accepted Answer · 2014-08-18T18:07:32.920

1

It is better to sort the JS object before generating the HTML. But since you want to do it after generation, Try this code

$(".itemBox").sort(function (a, b) {
    var d1 = new Date($(a).data('date'));
    var d2 = new Date($(b).data('date'));
    return d2 < d1 ? 1 : -1;
}).appendTo('body');

Demo

edited Aug 18 '14 at 18:07

answered Aug 18 '14 at 17:56

Chamika Sandamal

23,565
5
63
86

how to Sort dynamiclly created html div using jquery

1 Answers1