Jquery 按时间顺序添加项目

我正在创建一个训练记录器。添加工作正常，但我也想按时间顺序列出它们

$('#logIt').click( function() {
    var date = new Date($('#workoutDate').val());
    var activity = $('#activity').val();

    $('.history').prepend('<li title="' + date + '">'
            + activity
        + '</li>');
    $('#logger')[0].reset();

    return false;

});

---

再次感谢您的帮助。

我建议使用

数据-

属性。例如：

$('.history').prepend('<li data-date="' + date + '">' + activity + '</li>');

$（“.history”）.prepend（“
“+activity+”
”）；

---

有关更多信息，请参阅。

查看我为您创建的JSFIDLE： 它还不完整，但它是关于如何动态修改列表和比较日期的想法。 这是一个良好的开端：

Javascript

$（'#自定义日期'）。单击（函数（）{
var custom_date=$（'#user_input'）.val（）；
//确保列表正在增长
log（$（'.history li'）.children（）.length）；
$（'.history li'）。每个（函数（）{
var logged_date=$（this）.find（'input'）.attr（'title'）；
如果（新日期（自定义日期）这是我想出的解决方案

$(document).ready( function() {     

    $("#workoutDate").datepicker();
    $("#workoutDate").datepicker('setDate', new Date());
    $("#workoutDate-btn").click( function(){
        if ( $("#workoutDate").datepicker("widget").is(":visible") ) {
            $("#workoutDate").datepicker("hide");
        } else {
            $("#workoutDate").datepicker("show");
        }
    });

    // this adds an item to a user's history
    $('#logIt').click( function() {
        var date = new Date($('#workoutDate').val());

        $('.history').append('<li data-date="' + date + '">'
            + date
        + '</li>');

        sortDates();
        return false;
    });

});

function sortDates() {
    var $dateArray = $('.history li');

    $dateArray.sort(function(a,b){
        var a = new Date( $(a).text() );
        var b = new Date( $(b).text() );

        if ( a < b ){
            return -1;
        }
        if ( a > b ){
            return 1;
        }
        return 0;
    });

    $('.history').html($dateArray);
    $dateArray.sort(function(a,b){
        return new Date( $(a).text() ) < new Date( $(b).text() );
    });

    $('.history').html($dateArray);
}

$（文档）.ready（函数（）{
$（“#workoutDate”）.datepicker（）；
$（“#workoutDate”）.datepicker（'setDate'，new Date（））；
$（“#工作日期btn”）。单击（函数（）{
如果（$（“#workoutDate”）.datepicker（“小部件”）为（“：可见”））{
$（“#workoutDate”）.datepicker（“隐藏”）；
}否则{
$（“#workoutDate”）。日期选择器（“show”）；
}
});
//这会将项目添加到用户的历史记录中
$（'#logIt'）。单击（函数（）{
var date=新日期（$（“#workoutDate”）.val（）；
$（'.history'）.append（'
）
+日期
+“
”）；
sortDates（）；
返回false；
});
});
函数sortDates（）{
var$dateArray=$（'.history li'）；
$dateArray.sort（函数（a，b）{
var a=新日期（$（a）.text（））；
var b=新日期（$（b）.text（））；
if（ab）{
返回1；
}
返回0；
});
$（'.history'）.html（$dateArray）；
$dateArray.sort（函数（a，b）{
返回新日期（$（a）.text（））<新日期（$（b）.text（））；
});
$（'.history'）.html（$dateArray）；
}

谢谢大家的帮助！
我在实现这一点时遇到困难。$（this）.attr（'title'）.val（）；什么也没做。事实上，脚本在这里似乎完全崩溃了。这在1.8.3中不可用吗？@BenRinehart代码只是一个想法。我更新了我的帖子，为您的问题提供了更深入的解决方案。您可以进一步修改它。我更喜欢使用标题。谢谢。
     $('#custom_date').click(function() {

        var custom_date =  $('#user_input').val();   
        //make sure the list is growing
        console.log($('.history li').children().length);

        $('.history li').each(function() {

        var logged_date = $(this).find('input').attr('title');
          if (new Date(custom_date) <= new Date(logged_date)) 
          {

              var position = $(this).index()-1;
              console.log(custom_date+'is
              less than'+logged_date+'position is:'+position);   

             $('.schedule ul li').eq(position).after('<li><input title="' + 
custom_date + '" value = "'+custom_date+'"></input></li>');
                return false;
          }


        });    

        });


        $('#current_date').click( function() {

        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth()+1; //January is 0!

        var yyyy = today.getFullYear();
        if(dd<10){dd='0'+dd;} if(mm<10){mm='0'+mm;} 
        today = mm+'/'+dd+'/'+yyyy;
        console.log(today);


            $('.history li').each(function() {

            var logged_date = $(this).find('input').attr('title');
             if (new Date(logged_date)> new Date(today)) {

            //get index of element
            var position = $(this).index()-1;

             $('.history li').eq(position).after('<li>
             <input title="' + today + '" value = "'+today+'">
              </input></li>');
                return false;
            }

            });



        });

$(document).ready( function() {     

    $("#workoutDate").datepicker();
    $("#workoutDate").datepicker('setDate', new Date());
    $("#workoutDate-btn").click( function(){
        if ( $("#workoutDate").datepicker("widget").is(":visible") ) {
            $("#workoutDate").datepicker("hide");
        } else {
            $("#workoutDate").datepicker("show");
        }
    });

    // this adds an item to a user's history
    $('#logIt').click( function() {
        var date = new Date($('#workoutDate').val());

        $('.history').append('<li data-date="' + date + '">'
            + date
        + '</li>');

        sortDates();
        return false;
    });

});

function sortDates() {
    var $dateArray = $('.history li');

    $dateArray.sort(function(a,b){
        var a = new Date( $(a).text() );
        var b = new Date( $(b).text() );

        if ( a < b ){
            return -1;
        }
        if ( a > b ){
            return 1;
        }
        return 0;
    });

    $('.history').html($dateArray);
    $dateArray.sort(function(a,b){
        return new Date( $(a).text() ) < new Date( $(b).text() );
    });

    $('.history').html($dateArray);
}