1. 首页
  2. 问答
  3. 按日期排序HTML/JavaScript时间轴（按最旧/最新排序）

按日期排序HTML/JavaScript时间轴（按最旧/最新排序）

2012-11-04 71 views
1

我正在尝试为我的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 
}​

JS

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

回答

2

所有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

+0

感谢您的答复！你能在jsfiddle给我看看吗？我的代码在这里http://jsfiddle.net/Rf5ww/1/ – methuselah

+0

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

+0

@methuselah如果我的答案解决了您的问题，请将其标记为已接受 – Andbdrew

相关问题

 相关问题