我正在嘗試爲我的HTML/JavaScript時間軸創建一個功能，以在頁面加載時按最新日期（英國格式）對條目進行排序，併爲用戶選項可按最新/最舊條目對時間線條目進行排序。按日期排序HTML/JavaScript時間軸（按最舊/最新排序）

我該如何做到這一點？我希望所有div的日期id即<div id="date">17/10/2011</div>被排序（在排序時使用簡短的動畫）。這是我迄今所做的：http://jsfiddle.net/Rf5ww/1/

HTML

<div id="containertop" > 
    <a href="#">Newest First</a><br> 
    <a href="#">Oldest First</a> 
</div> 
    <div id="container"> 

     <div class="timeline_container"> 
      <div class="timeline"> 
       <div class="plus"></div> 
      </div> 
     </div> 

     <div class="item "> 
      <a href='#' class='deletebox'>X</a> 
      <div><div id="date">12/10/2012</div> 
       <div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet metus tellus. Suspendisse potenti. Fusce et arcu magna. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus tempor euismod. Cras quis tellus nisl, tincidunt feugiat arcu. In tristique lorem a leo tincidunt mattis. Proin eu augue sit amet urna dictum malesuada et vitae est. Donec vitae mauris ipsum. Curabitur imperdiet condimentum aliquet. Aenean a lectus purus. Integer sodales leo quis tellus rutrum sagittis non mattis tellus. Curabitur ornare quam non felis luctus non facilisis nibh ultrices. 
</div> 
</div> 
      </div> 
<div class="item "> 
<a href='#' class='deletebox'>X</a> 
      <div><div id="date">17/10/2011</div> 
       <div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet metus tellus. Suspendisse potenti. Fusce et arcu magna. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus tempor euismod. Cras quis tellus nisl, tincidunt feugiat arcu. In tristique lorem a leo tincidunt mattis. Proin eu augue sit amet urna dictum malesuada et vitae est. Donec vitae mauris ipsum. Curabitur imperdiet condimentum aliquet. Aenean a lectus purus. Integer sodales leo quis tellus rutrum sagittis non mattis tellus. Curabitur ornare quam non felis luctus non facilisis nibh ultrices. 
</div> 
     </div>   
     </div> 
     <div class="item "> 
<a href='#' class='deletebox'>X</a> 
       <div> 
     <div id="date">10/10/2011</div> 
        <div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet metus tellus. Suspendisse potenti. Fusce et arcu magna. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus tempor euismod. Cras quis tellus nisl, tincidunt feugiat arcu. In tristique lorem a leo tincidunt mattis. Proin eu augue sit amet urna dictum malesuada et vitae est. Donec vitae mauris ipsum. Curabitur imperdiet condimentum aliquet. Aenean a lectus purus. Integer sodales leo quis tellus rutrum sagittis non mattis tellus. Curabitur ornare quam non felis luctus non facilisis nibh ultrices. 
</div> 
     </div> 
     </div> 


     <div class="item"> 
<a href='#' class='deletebox'>X</a> 
       <div> 
        <div id="date">02/12/2011</div> 
        <div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet metus tellus. Suspendisse potenti. Fusce et arcu magna. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus tempor euismod. Cras quis tellus nisl, tincidunt feugiat arcu. In tristique lorem a leo tincidunt mattis. Proin eu augue sit amet urna dictum malesuada et vitae est. Donec vitae mauris ipsum. Curabitur imperdiet condimentum aliquet. Aenean a lectus purus. Integer sodales leo quis tellus rutrum sagittis non mattis tellus. Curabitur ornare quam non felis luctus non facilisis nibh ultrices. 
</div> 
    <br/><br/> 
       <script type="text/javascript"><!-- 
       google_ad_client = "ca-pub-6904774409601870"; 
       /* newtwitter */ 
       google_ad_slot = "7972402542"; 
       google_ad_width = 336; 
       google_ad_height = 280; 
       //--> 
       </script> 
       <script type="text/javascript" 
       src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
       </script> 
       </div>   
      </div> 
     <div class="item"> 
    <a href='#' class='deletebox'>X</a> 
        <div> 

        <div id="date">13/10/2013</div> 

         <div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet metus tellus. Suspendisse potenti. Fusce et arcu magna. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus tempor euismod. Cras quis tellus nisl, tincidunt feugiat arcu. In tristique lorem a leo tincidunt mattis. Proin eu augue sit amet urna dictum malesuada et vitae est. Donec vitae mauris ipsum. Curabitur imperdiet condimentum aliquet. Aenean a lectus purus. Integer sodales leo quis tellus rutrum sagittis non mattis tellus. Curabitur ornare quam non felis luctus non facilisis nibh ultrices. 
</div> 

        </div>   
       </div> 
     <div class="item"> 
<a href='#' class='deletebox'>X</a> 
       <div> 
        <div id="date">12/10/2014</div> 
        <div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet metus tellus. Suspendisse potenti. Fusce et arcu magna. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus tempor euismod. Cras quis tellus nisl, tincidunt feugiat arcu. In tristique lorem a leo tincidunt mattis. Proin eu augue sit amet urna dictum malesuada et vitae est. Donec vitae mauris ipsum. Curabitur imperdiet condimentum aliquet. Aenean a lectus purus. Integer sodales leo quis tellus rutrum sagittis non mattis tellus. Curabitur ornare quam non felis luctus non facilisis nibh ultrices. 
</div> 
     </div> 


    </div> 


    </div>

CSS

body { background-color: #E7EBF2; font-family:arial; font-size:13px } 
#container, #containertop { width:860px; margin: 0 auto;  } 

.borderclass { border:1px solid #A9B6D2; } 
.item { 
    width: 408px; 
    margin: 10px; 
    float: left; 
    margin-top:10px; 
    background-color:#ffffff; 
    border:solid 1px #B4BBCD; 
min-height:50px; 
text-align:justify; 
word-wrap:break-word; 
} 
.topbox 
{ 
margin: 10px; 


margin-top: 10px; 
background-color: white; 
border: solid 1px #B4BBCD; 

} 


.item div, .topbox div 
{ 
padding:8px;  
} 
.rightCorner { 
    background-image: url("images/right.png"); 
    display: block; 
    height: 15px; 
    margin-left: 408px; 
    margin-top: 8px; 
    padding: 0; 
    vertical-align: top; 
    width: 13px; 
z-index:2; 

    position: absolute; 
} 
.leftCorner{ 
background-image: url("images/left.png"); 
display: block; 
height: 15px; 
width: 13px; 
margin-left: -13px; 
margin-top: 8px; 
position: absolute; 
z-index:2; 
} 
#popup{ display: block; 
width: 408px; 
    float: left; 
    margin-top:10px; 
    background-color:#ffffff; 
    border:solid 1px #A9B6D2; 
    min-height:60px; 
    display:none; 
    position:absolute; 
    margin:10px; 
} 
.Popup_rightCorner 
{ 
background-image: url("images/right.png"); 
    display: block; 
    height: 15px; 
    margin-left: 408px; 
    margin-top: 8px; 
    padding: 0; 
    vertical-align: top; 
    width: 13px; 
z-index:2; 

    position: absolute; 
} 
#box 
{ 
padding:8px;  

} 
#update 
{ 
width:100%; 
} 

.timeline_container{ 
       width: 16px; 
       text-align: center; 
       margin: 0 auto; 
       cursor:pointer; 
        display: block; 
      } 
      .timeline{ 

       margin: 0 auto; 
       background-color:#e08989; 
    display: block; 
    float: left; 
    height: 100%; 
    left: 428px; 
    margin-top: 10px; 
    position: absolute; 
    width: 4px; 
      } 
      .timeline:hover{ 
       cursor: pointer; 
       margin: 0 auto; 
      } 
      .timeline div.plus{ 
       width: 14px; 
       height: 14px; 

       position: relative; 
       left: -6px; 
      } 
      #update_button { 
background-color: #cc0000; 
color: white; 
font-weight: bold; 
padding: 5px; 
border: solid 1px #333; 
margin-top: 5px; 
cursor: pointer; 
} 
.shade{box-shadow:0px 0px 18px #000;-moz-box-shadow:0px 0px 18px #000;-webkit-box-shadow:0px 0px 18px #000} 
h1{ font-family: 'Georgia',Times New Roman; } 
.timeline:hover 
{ 
cursor: none; 
} 
.deletebox 
{ 
font-weight:bold; 
float:right; 
text-decoration:none; 
margin:8px 10px 8px 10px; 
color:#cc0000 
}

$(document).ready(function() { 


    function Arrow_Points() { 
     var s = $('#container').find('.item'); 
     $.each(s, function(i, obj) { 
      var posLeft = $(obj).css("left"); 
      $(obj).addClass('borderclass'); 
      if (posLeft == "0px") { 
       html = "<span class='rightCorner'></span>"; 
       $(obj).prepend(html); 
      } 
      else { 
       html = "<span class='leftCorner'></span>"; 
       $(obj).prepend(html); 
      } 
     }); 
    } 

    $('.timeline_container').mousemove(function(e) { 
     var topdiv = $("#containertop").height(); 
     var pag = e.pageY - topdiv - 26; 
     $('.plus').css({ 
      "top": pag + "px", 
      "background": "url('images/plus.png')", 
      "margin-left": "1px" 
     }); 
    }). 
    mouseout(function() { 
     $('.plus').css({ 
      "background": "url('')" 
     }); 
    }); 



    $("#update_button").live('click', function() { 
     var x = $("#update").val(); 
     $("#container").prepend('<div class="item"><a href="#" class="deletebox">X</a><div>' + x + '</div></div>'); 

     //Reload masonry 
     $('#container').masonry('reload'); 

     $('.rightCorner').hide(); 
     $('.leftCorner').hide(); 
     Arrow_Points(); 

     $("#update").val(''); 
     $("#popup").hide(); 
     return false; 
    }); 

    // Divs 
    $('#container').masonry({ 
     itemSelector: '.item', 
    }); 
    Arrow_Points(); 

    //Mouseup textarea false 
    $("#popup").mouseup(function() { 
     return false 
    }); 

    $(".timeline_container").click(function(e) { 
     var topdiv = $("#containertop").height(); 
     $("#popup").css({ 
      'top': (e.pageY - topdiv - 33) + 'px' 
     }); 
     $("#popup").fadeIn(); 
     $("#update").focus(); 


    }); 


    $(".deletebox").live('click', function() { 
     if (confirm("Are your sure?")) { 
      $(this).parent().fadeOut('slow'); 
      //Remove item 
      $('#container').masonry('remove', $(this).parent()); 
      //Reload masonry 
      $('#container').masonry('reload'); 
      $('.rightCorner').hide(); 
      $('.leftCorner').hide(); 
      Arrow_Points(); 
     } 
     return false; 
    }); 



    //Textarea without editing. 
    $(document).mouseup(function() { 
     $('#popup').hide(); 

    }); 


});

來源

2012-11-04 methuselah

所有id="date"年代到class="date"「切換年代後，你應該這樣做：

---> This Here JSFiddle <---

或見下文......

$(function(){ 
    var itemsArray = $('div.item'); 
    itemsArray.sort(function(a,b){ 
     var aTime = new Date($(a).find('.date').text()).getTime(); 
     var bTime = new Date($(b).find('.date').text()).getTime(); 
     return aTime - bTime; 
    }); 

    $('#sortAsc').click(function(){ 
     $("#container").empty(); 
     $(itemsArray).each(function(){ 
      $("#container").prepend($(this)); 
     }); 
    }); 

    $('#sortDesc').click(function(){ 
     $("#container").empty(); 
     $(itemsArray).each(function(){ 
      $("#container").append($(this)); 
     }); 
    }); 
})

來源

2012-11-04 22:39:25 Andbdrew

感謝您的答覆！你能在jsfiddle給我看看嗎？我的代碼在這裏http://jsfiddle.net/Rf5ww/1/ – methuselah

@methuselah我更新了我的答案，幷包括一個功能jsfiddle。 – Andbdrew

@methuselah如果我的答案解決了您的問題，請將其標記爲已接受 – Andbdrew

按日期排序HTML/JavaScript時間軸（按最舊/最新排序）

回答

---> This Here JSFiddle <---

相關問題