날짜를 사용하여 요소 사이에 요소 삽입 (날짜순)

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/

괜찮 으면이 새로운 요소를 삽입하고 agian 요소는 정렬하지 않으려합니다.

Answer 1

확인이 아웃 :

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

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

, 당신은, 아래

을 사용할 수 있습니다

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

jsFiddle을 업데이트했습니다. 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; 
     } 
    }); 
});