jquery - 通过使用日期(按日期)在元素之间插入元素

Question

我想知道如何通过使用日期插入元素？

示例:

<time datetime="2013-07-29">2013-07-29</time>
<time datetime="2013-06-14">2013-06-14</time>
<time datetime="2013-06-10">2013-06-10</time>
<time datetime="2013-05-01">2013-05-01</time>

新元素看起来像......:

<time datetime="2013-06-12">2013-06-12</time>

如何在2013-06-14和2013-06-10元素之间功能性插入这个新元素？

这是我的代码:

HTML:

<input value ="2013-06-12"><button>Add</button>

<time datetime="2013-07-29">2013-07-29</time>
<time datetime="2013-06-14">2013-06-14</time>
<time datetime="2013-06-10">2013-06-10</time>
<time datetime="2013-05-01">2013-05-01</time>

jQuery:

$('button').on('click',function(){
    var date = $('input').val();
    var html = $('<time datetime="'+date+'">'+date+'</time>');
    //html.addClass('new').insertAfter('time[datetime="2013-06-14"]');
});

演示: http://jsfiddle.net/pmREJ/

如果可以的话，我想插入这个新元素，而不是再次对元素进行排序。

Answer 1

如果您已经有排序的时间列表，您可以使用如下，

$('button').on('click',function(){
    var date = $('input').val();
    var flag = 0;
    var html = $('<time datetime="'+date+'">'+date+'</time>');
    $('time').each(function() {
        var dt = new Date($(this).attr('datetime'));
        var inputdt = new Date(date);
        if( dt.getTime() > inputdt.getTime()) {
           $(this).before(html);
            flag = 1;
            return;
        }
    });
    $('time:last').after(html);
});

检查这个http://jsfiddle.net/6UFmb/2/