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

Question

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

例子 ：

<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/

Answer 2

看一下这个：

 $('button').on('click',function(){
    var dateInput = $('input').val();
    var html = $('<time datetime="'+dateInput+'">'+dateInput+'</time>');

    dateInput = new Date( dateInput);

    $('time').each(function(){
        var tmp = new Date($(this).text());
        if(dateInput.getTime() > tmp.getTime())
        {
           html.addClass('new').insertBefore(this);
            return false;
        }
        html.addClass('new').insertAfter('time:last');
    });
});

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

Answer 3

$('button').on('click',function() {
    var date = $('input').val(),
        t = new Date(date).getTime(),
        html = $('<time datetime="'+date+'">'+date+'</time>'),
        $f = $('time').filter(function() {
            return new Date(this.innerHTML).getTime() <= t;
        }).first();

    $f.length ? $f.before(html) : $('#wrapper').append(html);
});

http://jsfiddle.net/thT2k/

Answer 4

我已经更新了你的 jsFiddle。使用.each，您可以解决您的问题：http: //jsfiddle.net/pmREJ/7/

$('button').on('click',function(){
    var date = $('input').val();
    var html = $('<time class="new" datetime="'+date+'">'+date+'</time>');
    $("time").each(function(){
        if(date > $(this).attr('datetime')){
            $(html).insertBefore($(this));
            return false;
        }
    });
});