Как я могу группировать divs и вычислять значения?

Question

У меня есть следующая структура:

<div class="container"> 
    <div class="block"> 
     <div class="id">1</div> 
     <div class="date">02/21/2015</div> 
     <div class="value">111</div> 
    </div> 
    <div class="block"> 
     <div class="id">1</div> 
     <div class="date">02/21/2015</div> 
     <div class="value">222</div> 
    </div> 
    <div class="block"> 
     <div class="id">1</div> 
     <div class="date">02/30/2015</div> 
     <div class="value">333</div> 
    </div> 
    <div class="block"> 
     <div class="id">1</div> 
     <div class="date">02/30/2015</div> 
     <div class="value">444</div> 
    </div> 
    <div class="block"> 
     <div class="id">2</div> 
     <div class="date">05/17/2015</div> 
     <div class="value">555</div> 
    </div> 
</div> 

Мне нужно сгруппируйте его и вычислить значения, то мне нужно напечатать это на моей странице. Шаги:

• Группа по ID
• группы по Дата (в ID)
• Вычислить Значения (в каждой даты)

Итак, результат:

<div class="container"> 
    <div class="block"> 
     <div class="id">1</div> 
     <div class="date">02/21/2015</div> 
     <div class="value">333</div> <!-- 111+222 --> 
    </div> 
    <div class="block"> 
     <div class="id">1</div> 
     <div class="date">02/30/2015</div> 
     <div class="value">777</div> <!-- 333+444 --> 
    </div> 
    <div class="block"> 
     <div class="id">2</div> 
     <div class="date">05/17/2015</div> 
     <div class="value">555</div> 
    </div> 
</div> 

P.S. Конечно, мне не нужны комментарии. :)

Можете ли вы помочь мне с кодом JS/jQ?

Answer 1

Это один из способов (demo):

var $container = $('.container'), 
    $blocks = $container.find('.block'), 
    results = {}, 
    output = ''; 

$blocks.each(function() { 
    var $this = $(this), 
     id = $this.find('.id').html(), 
     date = $this.find('.date').html(), 
     value = $this.find('.value').html(); 

    results[id] = results[id] || {}; 
    results[id][date] = results[id][date] || 0; 
    results[id][date] += parseInt(value); 
}); 

$.each(results, function (id, dates) { 
    $.each(dates, function (date, value) { 

    output += '<div class="block">' + 
     '<div class="id">' + id + '</div>' + 
     '<div class="date">' + date + '</div>' + 
     '<div class="value">' + value + '</div>' + 
    '</div>'; 

    }); 
}); 

$container.html(output);