Question

我试图弄清楚如何让<div/>根据当前日期自动重新定位。基本上，要移动的<div/>包含一个<hr/>行，用于分隔过去＆＃39;和未来＆＃39;列表中的项目，其项目由日期（YYMMDD）标识。这就是我的意思：

<head>
<!-- FIRST, SET DATE (YYMMDD) AS ID FOR DIV 'TIMELINE' -->
<script>
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yy=today.getFullYear().toString().substr(2, 2);

if(dd<10) { 
    dd='0'+dd
} 

if(mm<10) {
    mm='0'+mm
} 
today = yy+mm+dd;

var element = document.getElementById("timeline");
element.setAttribute("data_date", today);

</script>


<!-- NEXT, MOVE 'TIMELINE' DYNAMICALLY SO THAT IT POSITIONS ITSELF IN-BETWEEN PAST & FUTURE EVENTS -->
<script type="text/javascript">
function sortdiv() {
var container = document.getElementById("content");
var elements = container.childNodes;
var sortMe = [];
for (var i=0; i<elements.length; i++) {
    if (!elements[i].id) {
        continue;
    }
    var sortPart = elements[i].id.split("-");
     if (sortPart.length > 1) {
        sortMe.push([ 1 * sortPart[1] , elements[i] ]);
    }
}
 sortMe.sort(function(x, y) {
    return y[0] - x[0];
});
for (var i=0; i<sortMe.length; i++) {
    container.appendChild(sortMe[i][1]);
}
document.getElementById("button").innerHTML = "done.";
}
</script>
</head>

<div id="content">
<div id="button"><a href="#" onclick="sortdiv();">sort!</a></div>
<!-- RIGHT NOW I HAVE A BUTTON TO TRIGGER THE FUNCTION FOR TESTING, BUT THIS WILL CHANGE TO AN ONLOAD WHEN IT WORKS -->
<div id="timeline">
    <HR align="left">
    <HR align="left">
</div>

<div class="date" data_date="170206">SOME CONTENT</DIV>
<div class="date" data_date="161011">SOME MORE CONTENT</DIV>
<div class="date" data_date="160915">EVEN MORE CONTENT</DIV>

Answer 1

决定只做一个片段。发布的代码存在一些可能导致问题的javascript问题

＆＃13;

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yy=today.getFullYear().toString().substr(2, 2);

if(dd<10) {
    dd='0'+dd
}

if(mm<10) {
    mm='0'+mm
}
today = yy+mm+dd;

function sortdiv() {
    var container = document.getElementById("content");
    var elements = container.childNodes;
    var sortMe = [];
    for (var i=0; i<elements.length; i++) {
        if (!elements[i].id) {
            continue;
        }
        var sortPart = elements[i].id.split("-");
        if (sortPart.length > 1) {
            sortMe.push([ 1 * sortPart[1] , elements[i] ]);
        }
    }
    sortMe.sort(function(x, y) {
        return y[0] - x[0];
    });
    for (var i=0; i<sortMe.length; i++) {
        container.appendChild(sortMe[i][1]);
    }
    document.getElementById("button").innerHTML = "done.";
}

// insertAfter is from karim79's answer to http://stackoverflow.com/questions/4793604/how-to-do-insert-after-in-javascript-without-using-a-library
function insertAfter(newNode, referenceNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

function moveLine() {
    var timeline = document.getElementById("timeline");
    var timelineDate = parseInt(timeline.dataset.date);
    var divs = document.getElementsByClassName('date');
    var moveTo = null;
    for (var i = 0; i < divs.length; i++) {
        if (timelineDate < parseInt(divs[i].dataset.date)) {
            moveTo = divs[i];
        } else {
            break;
        }
    }
    if (moveTo) {
        timeline.parentNode.removeChild(timeline);
        insertAfter(timeline, moveTo);
    } else {
        timeline.parentNode.removeChild(timeline);
        divs[0].parentNode.insertBefore(timeline, divs[0]);
    }
}

function init() {
    var element = document.getElementById("timeline");
    element.setAttribute("data-date", today);
    document.getElementById("moveLine").addEventListener("click", moveLine, false );
}

document.addEventListener( "DOMContentLoaded", init, false );

＆＃13;

<body>
<div id="content">
    <input id="moveLine" type="button">
    <div id="button"><a href="#" onclick="sortdiv();">sort!</a></div> <!--RIGHT NOW I HAVE A BUTTON TO TRIGGER THE FUNCTION FOR TESTING, BUT THIS WILL CHANGE TO AN ONLOAD WHEN IT WORKS-->
    <div id="timeline">
        <HR align="left">
        <HR align="left">
    </div>
    <div class="date" data-date="170206">SOME CONTENT</DIV>
    <div class="date" data-date="161011">SOME MORE CONTENT</DIV>
    <div class="date" data-date="160915">EVEN MORE CONTENT</DIV>
    <div class="date" data-date="160804">EVEN MORE CONTENT</DIV>
</div>
</body>

＆＃13;

根据当前日期更改div ID

1 个答案: