---> This Here JSFiddle <---

Question

我正在尝试为我的HTML / JavaScript时间轴创建一个功能，以便在页面加载时按最新日期（英国格式）对条目进行排序，并为用户提供按最新/最旧条目对时间线条目进行排序的选项。

我将如何做到这一点？我希望所有具有日期ID（即<div id="date">17/10/2011</div>）的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();

    });


});

Answer 1

将所有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));
        });
    });
})

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

1 个答案:

---> This Here JSFiddle <---