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

【问题标题】：Insert element between elements via using date (by date)通过使用日期（按日期）在元素之间插入元素
【发布时间】：2013-10-03 11:27:30
【问题描述】：

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

示例：

<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-10elements之间插入这个新元素功能上？

这是我的代码：

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/

如果没问题，我想插入这个新元素，而不是重新排序元素。

【问题讨论】：

标签： jquery sorting date insert

【解决方案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/

【讨论】：

Oh filter (Undefined) vs simple each (your) ，哪个更好
抱歉，发现错误。试试看：2009-06-12
如果日期是最后一个日期，会做一些吗？
感谢您的发现。更新了答案。

【解决方案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/

【讨论】：

我的意思是功能上很抱歉:(
功能定义！？
是的，就像所有可能的日期一样
例如：添加 2013-06-11 , 1999-01-01 所有元素将插入正确的位置

【解决方案3】：

我已经更新了你的 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;
        }
    });
});

【讨论】：

【解决方案4】：

$('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/

【讨论】：

@l2aelba 你用不同的值测试过另一个答案吗？
测试了 2 个值，将测试更多
我会使用Date 对象，因为它比比较字符串更可靠。
2011-06-12 将失败
@l2aelba 更新了答案。