Question

我有下面的循环遍历每个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

Answer 1

你可以通过除以10来计算一年中的十年，将其放置并将结果乘以。

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

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

Answer 2

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

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

                    }

Answer 3

一种方法：

＆＃13;

// 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);
});

＆＃13;

 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>

＆＃13;

在回答澄清时，在对问题的评论中，您想要一个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));

＆＃13;

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

＆＃13;

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>

＆＃13;

参考文献：

JavaScript的：
- Array.prototype.filter()。
- Array.prototype.join()。
- Element.classList。
- Function.prototype.call()。
- JSON.stringify()。
- String.indexOf()。
- String.prototype.match()。
jQuery的：
- appendTo()。
- each()。
- insertBefore()。
- prev()。

Answer 4

如果我理解你的问题，那么

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

这创建了一个带有几十年的对象＆＃34;作为属性名称的数组类型，其中数组包含年份。

几十年的jQuery Javascript Group年代

4 个答案: