如何將div分組並計算值？

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