我有下面的循环遍历每个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]);
});
答案 0 :(得分:2)
你可以通过除以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]);
});
答案 1 :(得分:0)
更新了使用下划线进行分组。
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);
}
答案 2 :(得分:0)
一种方法:
// 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));
// 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;
参考文献:
答案 3 :(得分:0)
如果我理解你的问题,那么
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;作为属性名称的数组类型,其中数组包含年份。