1

HTML / JavaScriptタイムラインの機能を作成して、ページの読み込み時にエントリを最新の日付（UK形式）で並べ替え、ユーザーにタイムラインのエントリを最新/最も古いエントリで並べ替えるオプションを提供しようとしています。

どうすればこれを達成できますか？日付IDを持つすべてのdiv、つまり並べ替えを希望<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();

    });


});​
4

1 に答える 1

2

id="date"すべての'を'に切り替えclass="date"たら、次のようにする必要があります。

--->これは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-04T22:39:25.070 に答える