几十年的jQuery Javascript Group年代

时间:2014-10-20 08:52:55

标签: javascript jquery html arrays

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

4 个答案:

答案 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]);
});

JSFiddle

答案 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)

一种方法:

&#13;
&#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;
&#13;
&#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;
&#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;
&#13;
&#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;作为属性名称的数组类型,其中数组包含年份。