如何使用jquery对动态创建的html div进行排序

时间:2014-08-18 17:26:10

标签: javascript jquery html5

我使用jquery动态创建了html div,现在我想根据日期/名称对div进行排序。动态创建的div就像,

<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

$.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); 
}

如何使用jquery做到这一点?我需要任何插件或功能吗?

1 个答案:

答案 0 :(得分:1)

最好在生成HTML之前对JS对象进行排序。但是因为你想在生成后做到这一点,试试这段代码

$(".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