Question

我有以下代码：

var div = $("<div id='3.5'>AA</div>");
div_id_after = Math.floor(parseFloat(div.get(0).id));

$('#'+div_id_after).after(div);


<div id='1'>a</div>
<div id='2'>b</div>
<div id='3'>c</div>
<div id='4'>d</div>
<div id='5'>e</div>

这将按此顺序生成div：

一个
b
ç
AA
d
e

显然，使用数字作为IE / netscape兼容性问题的ID是不恰当的，但请耐心等待。

如果您有使用自定义属性“order”创建的div，则此属性的值为TimeStamp：

<div order='2011-05-13 15:57:09'>a</div>
<div order='2011-05-14 11:23:02'>b</div>
<div order='2011-05-19 10:12:11'>c</div>
<div order='2011-06-10 12:39:37'>d</div>
<div order='2011-06-12 13:47:17'>e</div>

并且，如上面的代码中你有一个元素：

var div = $("<div object='2011-05-19 17:46:21'>AA</div>");

您如何订购这些商品，例如上面的示例？

Answer 1

这样的事情（假设有一个父div包裹你的所有物品，id'd'容器'）。

$(document).ready(function(){
  $('#sort_me').click(doOrder);
});

function orderSort(a,b)
{
   return ($(a).attr('order') > $(b).attr('order')) ? 1 : -1;
}

function doOrder()
{
   var orderable = [];
   $('div[order]').each(function(idx,el){
      orderable.push(el);
   });
   orderable.sort(orderSort);
   for (var i=0; i < orderable.length;i++)
   {
        // Somewhat slow way of doing this.  Should be fine until you
        // get above 200 entries or so.  There are other ways which may 
        // be faster, but I thought this was good for explanation.
        $('#container').append(orderable[i]);
   }
}

加入：
忘了添加我的小提琴：http://jsfiddle.net/fUC2A/3/

Answer 2

我认为这是一种非标准的日期格式，因此您需要以某种方式解析...尝试这样的事情：

function resortDivs(){
        var divCon = $('#divContainer');
        var divArr = $('#divContainer').children('div').get();
        var div = $("<div order='2011-05-19 17:46:21'>AA</div>")[0]; 
        divArr.push(div);
        divArr.sort(function(a,b){
            var parse1 = customDate($(a).attr('order'));
            var parse2 = customDate($(b).attr('order'));
            return parse1 > parse2 ? 1 : -1; 
        });
        $.each(divArr, function(idx, itm) {divCon.append(itm);});
}
function customDate(date){
    var ymd = date.split(' ')[0];
    var hms = date.split(' ')[1];
    ymd = ymd.split('-');
    hms = hms.split(':');
    return  new Date(ymd[0],ymd[1],ymd[2],hms[0],hms[1],hms[2]);
}

它将所有元素放入一个数组中，使用您的订单属性使用自定义排序对数组进行排序，然后将它们重新附加到容器中。

Jsfiddle - 似乎正在发挥作用。

如何使用基于TimeStamp的自定义属性的jQuery来动态创建Div？

2 个答案: