循环遍历日期数组并使用 javascript/jQuery 标记 10 年范围答案

【问题标题】：Loop through an array of dates and mark 10 year ranges using javascript/jQuery循环遍历日期数组并使用 javascript/jQuery 标记 10 年范围
【发布时间】：2012-12-23 17:32:58
【问题描述】：

我有很多年：

$years = [1952,1954,1961,1962,1965,1982,1984,1984,1984,1985,1986,1986,1987,1988,1990,1991,1991,1993,1995]

我正在创建一个时间线，我的时间线使用 10 年的范围，所以它看起来像这样：

       1950      1960      1970      1980
.........|.........|.........|.........|.........

在 jQuery 的帮助下，我循环遍历这些年来的每个函数，并通过创建一个 div 将它们显示在时间轴上，并使用左侧 css 属性（1 年为 22px）定位它们：

$.each(years, function(key, value) { 
    var event = $('<div>').addClass('event');
    var posX = value*21;

    event = event.html(value).css('left',posX+'px');

    $('#timeline').append(event);
});

到目前为止一切都很好，但是我们您可以看到我有很多年，我无法正确显示它们。

如果在 10 年范围内有 超过 3 个 事件，我想显示一个按钮而不是事件 div，当我点击它时，我可以使用弹出窗口以显示其余事件。

我怎样才能做到这一点？

【问题讨论】：

如果您的数据格式更好，每一年都应该是唯一的，并且事件应该在年内，这将更容易。例如：{1952: ['event'], 1984: ['event1', 'event2']}
看起来是这样，我只是为了问题简化了它
在这种情况下，更新代码以反映您正在使用的实际数据。为了帮助您找到适合您的解决方案，我们需要查看您使用的实际结构。
哦，好吧，我明白你的意思了。它来自服务器，我无法改变它，所以我必须让它与它一起工作。

标签： javascript jquery date timeline

【解决方案1】：

在相关的几十年中处理年份会更容易。我会创建一个decades 数组并像下面这样填充它：

var $years = [1952,1954,1961,1962,1965,1982,1984,1984,1984,1985,1986,1986,1987,1988,1990,1991,1991,1993,1995];

var decades = [];
for(var i=0; i<$years.length; i++)
{
    var year = $years[i];
    var decade = (Math.floor(year / 10) * 10);
    if(!decades[decade])
        decades[decade] = [];
    decades[decade].push(year);
}

for(decade in decades){
    var years = decades[decade];
    // decade will be 1950, 1960, 1980, etc.
    // years will be an array of years within that decade

    if(years.length > 3) {
        // ...
    } else {
        // ...
    }
}

【讨论】：