jQuery Javascript Group Years by Decades

jQuery Javascript Group Years by Decades

本文关键字：by Decades Years Group Javascript jQuery      更新时间：2023-09-26

下面的循环遍历每个div，并返回每个div所代表的年份，但我想做的是将返回的年份分组为几十年的数组。我不太确定该怎么做，希望有人能帮上忙。

<div class="timeline-events timeline-year-1994">This is 1994<div>
<div class="timeline-events timeline-year-1997">This is 1997<div>
<div class="timeline-events timeline-year-2001">This is 2001<div>
<div class="timeline-events timeline-year-2003">This is 2003<div>
<div class="timeline-events timeline-year-2012">This is 2012<div>

$('.timeline-events').each(function(){
    console.log(this.className.match(/timeline-year-('d+)?/)[1]);
});

jsFiddle

您可以通过除以十来计算出一年中的十年，将其相加并乘以结果。

从那时起，它按照你的十年进行分组，并将其合并到你的对象中：

var groupedByDecade = {};
$('.timeline-events').each(function(){
    var year = this.className.match(/timeline-year-('d+)?/)[1],
        decade = Math.floor(year/10)*10;
    groupedByDecade[decade] = $.merge(groupedByDecade[decade] || [], [year]);
});

JSFiddle

如果我正确理解了你的问题；

var decades = {};
$('.timeline-events').each(function(){
    var year = this.className.match(/timeline-year-('d+)?/)[1];
    var decade = year.substring(0,3) + "0";
    if (decades.hasOwnProperty( decade )) {
         decades[ decade ].push(year);
    } else {
        decades[ decade ] = [ year ];
    }
});
console.log(JSON.stringify(decades));

这将创建一个属性名为"decembers"的对象，该对象属于数组类型，数组中包含年份。

更新以使用下划线进行分组。

http://jsfiddle.net/9o39jxLo/1/

var data = []; 
var decadedata = new Array();
$(function() {
$('.timeline-events').each(function(){
var year = (this.className.match(/timeline-year-('d+)?/)[1]);
    var decade = year - (year % 10);
    data.push({ "decade": decade, "year": year});
});
});
function testdecade(){
    var groupedData = _.groupBy(data, function(d){return d.decade});
console.log(groupedData);
                    }

一种方法：

// iterate over each of the '.timeline-events' elements:
$('.timeline-events').each(function() {
  // finding first the specific (four-digit) year,
  // then getting a substring, for the decade and adding a 0:
  var decade = (/timeline'-year'-('d{4})/).exec(this.className)[1].substring(2, 3) + '0',
    // if the previous element to the current element is a decade-grouping element and
    // it's the appropriate decade, we use that element; otherwise we create a new one:
    decadeDiv = $(this).prev('.decade-' + decade).length ? $(this).prev('.decade-' + decade) : $('<div />', {
      'class': 'decade-' + decade
    // and insert that element before the current element:
    }).insertBefore(this);
  // we then append this element to the decade grouping element:
  $(this).appendTo(decadeDiv);
});
 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timeline-events timeline-year-1994">This is 1994
</div>
<div class="timeline-events timeline-year-1997">This is 1997
</div>
<div class="timeline-events timeline-year-2001">This is 2001
</div>
<div class="timeline-events timeline-year-2003">This is 2003
</div>
<div class="timeline-events timeline-year-2012">This is 2012
</div>

在对这个问题的评论中，为了回应你想要一个JSON字符串的澄清，我建议（假设你想要元素的HTML）如下：

var decadeGroups = {};
$('.timeline-events').map(function () {
    var decade = [].filter.call(this.classList, function (cName) {
        return cName.indexOf('timeline-year-') === 0;
    }).join('').match(/'d{2}$/)[0].replace(/'d$/, '0');
    if (decadeGroups[decade]) {
        decadeGroups[decade].push(this.outerHTML);
    }
    else {
        decadeGroups[decade] = [this.outerHTML];
    }
});
console.log(JSON.stringify(decadeGroups));


// initialising an object:
var decadeGroups = {};
// iterating over the '.timeline-events' elements:
$('.timeline-events').each(function() {
  // reducing the array-like classList,
  var decade = [].filter.call(this.classList, function(cName) {
    // keeping only the class-name that starts with 'timeline-year-':
    return cName.indexOf('timeline-year-') === 0;
    // turning that into a string with join('')
    // matching the last two digits of the year,
    // replacing the last digit with a zero:
  }).join('').match(/'d{2}$/)[0].replace(/'d$/, '0');
  // if the object has a key of the current decade:
  if (decadeGroups[decade]) {
    // we add the outerHTML of the current element to that array:
    decadeGroups[decade].push(this.outerHTML);
  } else {
    // otherwise we create a new object key, and assign an array
    // containing the outerHTML of the current element:
    decadeGroups[decade] = [this.outerHTML];
  }
});
// logging the JSON-stringified object:
console.log(JSON.stringify(decadeGroups));
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timeline-events timeline-year-1994">This is 1994
</div>
<div class="timeline-events timeline-year-1997">This is 1997
</div>
<div class="timeline-events timeline-year-2001">This is 2001
</div>
<div class="timeline-events timeline-year-2003">This is 2003
</div>
<div class="timeline-events timeline-year-2012">This is 2012
</div>

参考文献：

  • JavaScript：
    • CCD_ 1
    • CCD_ 2
    • Element.classList
    • Function.prototype.call()
    • JSON.stringify()
    • String.indexOf()
    • String.prototype.match()
  • jQuery：
    • appendTo()
    • each()
    • CCD_ 10
    • CCD_ 11
相关文章：