Position divs basierend auf numerischen Klassenname

Question

Ich habe eine Reihe von Ereignissen, die ich vertikal auf der Seite in Bezug auf das Datum in der Klasse (YYYY-MM-DD) grafisch darstellen muss.

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

Das früheste Datum in der würde absolut von der Spitze der Seite positioniert werden. Die nächsten sequentiellen Daten würden unter dem frühesten erscheinen, aber in Korrelation mit der Zeitdifferenz. Es würde also eine größere Distanz zwischen diesen Ereignissen geben: 1990-03-18 und 2015-10-30. Und eine kleinere Entfernung zwischen 2017-05-20 und 2017-05-24.

Answer 1

Eine mögliche Lösung JavaScript https://jsfiddle.net/stzanr1s/4/

html von Wrapper imporved mit height und position: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> 

und Skript, das finden min, max und die relativen Positionen aller Elemente zählen.

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(); 

Geige enthält einen Stil, der Ereignisse durch rote Linien visualisiert.