Javascript 基于数字类名称定位div

我有一系列的事件需要在页面上垂直绘制，与类中的日期（YYYY-MM-DD）相关

---

最早的日期将绝对位于页面顶部。下一个连续日期将出现在最早日期的下方，但与时差相关。因此，这些事件之间的距离将更大：1990-03-18和2015-10-30。2017-05-20和2017-05-24之间的距离更小。

可能的JavaScript解决方案之一

包装器使用

高度和
位置导入的html:relative

<div class="wrapper">
  <div class="event 1990-03-18"></div>
  <div class="event 2008-10-30"></div>
  <div class="event 2016-08-03"></div>
  <div class="event 2017-05-20"></div>
  <div class="event 2017-05-24"></div>
</div>



和脚本，查找最小值、最大值并计算所有项目的相对位置

maxDate = new Date(0);
minDate = new Date(0);
var events = document.querySelectorAll(".event");

function getDate(event) {
    var clases = event.className.split(" ");
    for (var i = 0; i < clases.length; i++) {
    if (clases[i] != "event") {
        return new Date(Date.parse(clases[i]));
    }
}

function findMinMax() {
    minDate = getDate(events[0]);
    maxDate = getDate(events[0]);
    for (var i = 1; i < events.length; i++) {
        var d = getDate(events[i]);
        if (d.getTime() < minDate.getTime()) {
            minDate = d;
        }
        if (d.getTime() > maxDate.getTime()) {
            maxDate = d;
        }
    }
}

function setPositions() {
    findMinMax();
    var range = maxDate.getTime() - minDate.getTime();
    for (var i = 0; i < events.length; i++) {
        var d = getDate(events[i]);
        events[i].style.top = + ((d.getTime() - minDate.getTime()) * 100 / range) + "%";
    }
}

setPositions();

maxDate=新日期（0）；
minDate=新日期（0）；
var events=document.querySelectorAll（“.event”）；
函数getDate（事件）{
var clases=event.className.split（“”）；
对于（变量i=0；imaxDate.getTime（））{
maxDate=d；
}
}
}
函数setPositions（）{
findMinMax（）；
var range=maxDate.getTime（）-minDate.getTime（）；
对于（var i=0；i

fiddle包含一些以红线显示事件的样式。
Hi！到目前为止您尝试了什么？请告诉我们您是如何解决问题的，以及您的具体问题所在。您是否使用PHP从包含这些日期的数据生成这些div？如果是，您能包含这些代码吗？我不会用类解决这些问题。我宁愿在php中计算相对或绝对位置，并在
@style
中进行设置。但是，请向我们展示您的代码。
maxDate = new Date(0);
minDate = new Date(0);
var events = document.querySelectorAll(".event");

function getDate(event) {
    var clases = event.className.split(" ");
    for (var i = 0; i < clases.length; i++) {
    if (clases[i] != "event") {
        return new Date(Date.parse(clases[i]));
    }
}

function findMinMax() {
    minDate = getDate(events[0]);
    maxDate = getDate(events[0]);
    for (var i = 1; i < events.length; i++) {
        var d = getDate(events[i]);
        if (d.getTime() < minDate.getTime()) {
            minDate = d;
        }
        if (d.getTime() > maxDate.getTime()) {
            maxDate = d;
        }
    }
}

function setPositions() {
    findMinMax();
    var range = maxDate.getTime() - minDate.getTime();
    for (var i = 0; i < events.length; i++) {
        var d = getDate(events[i]);
        events[i].style.top = + ((d.getTime() - minDate.getTime()) * 100 / range) + "%";
    }
}

setPositions();