Count all numbers inside Parent div, and then sort them on Totals

Question

I want to calculate the total per "row-counts" of all "counts" inside, and then sort "row" based on the "row-totals". But the totals add up all numbers with class="count" instead of 'for each' only those within it's parent "row-counts".

<div id="container">
    <div class="row"> 
        <div class="row-counts">
             <span class="count">12</span>
             <span class="count">4</span>
             <span class="count">5</span>
             <span class="count">7</span>
        </div> 
        <div class="row-totals">

        </div>
    </div>  
    <div class="row">   
        <div class="row-counts">
             <span class="count">4</span>
             <span class="count">66</span>
             <span class="count">0</span>
             <span class="count">12</span>
        </div> 
        <div class="row-totals">

        </div>
    </div>  
    <div class="row"> 
        <div class="row-counts">
            <span class="count">7</span>
            <span class="count">99</span>
            <span class="count">42</span>
            <span class="count">17</span>
        </div>  
        <div class="row-totals">

        </div> 
    </div>  
</div>

<script>
// to calculate sum of all numbers in .row-counts
$('.row-counts').each(function(){
    var sum = 0;
    var select = $(this).find('.count');
    select.each(function()
                {
                sum += parseFloat($(this).text());

            });
            $('.row-totals').html(sum);         
});

// to sort on .row-totals
$(".row-totals").orderBy(function() {return +$(this).text();}).appendTo("#container");

jQuery.fn.orderBy = function(keySelector)
{
    return this.sort(function(a,b)
    {
        a = keySelector.apply(a);
        b = keySelector.apply(b);
        if (a > b)
            return 1;
        if (a < b)
            return -1;
        return 0;
    });
};
</script> 

Sorting plugin is from this topic: Sorting divs by number inside div tag and jQuery

Answer 1

I didn't test it, but I think you need one more level in your iteration. This should do the trick:

$('.row').each(function() {
    var total = $(this).find('.row-totals');
    var sum = 0;
    $(this).find('.row-counts').each(function(){
        var select = $(this).find('.count');
        select.each(function() {
            sum += parseFloat($(this).text());
        });
        total.html(sum);
    });
});

And then use your sort plugin as usual.

Answer 2

Here you go. Code commented with some pointers. Hope this helps. http://jsfiddle.net/N5Sd2/

// to calculate sum of all numbers in .row-counts
$('.row').each(function(index,RowElement){ // For each row

    var thisRowTotal = $(RowElement).find('.row-totals'); // set output div in variable
    var thisRowCounts = $(RowElement).find('.row-counts'); // set row count parent div in variable
    var sum = 0; // create sum var

    thisRowCounts.each(function(i,RowCountParent){ // for each row count parent

        var select = $(RowCountParent).find('.count'); // find counts
        select.each(function(i,e){ // for each count found
            sum = sum + parseInt($(e).html()); // convert into integer and add to sum
        }); // when finished
        thisRowTotal.html(sum); // output sum to output div       
    });

});

// to sort on .row-totals

jQuery.fn.orderBy = function(keySelector) // MAKE SURE YOU INIT THE PLUGIN...
{
    return this.sort(function(a,b)
    {
        a = keySelector.apply(a);
        b = keySelector.apply(b);
        if (a > b)
            return 1;
        if (a < b)
            return -1;
        return 0;
    });
};

// ....BEFORE YOU CALL IT IN YOUR CODE! This line moved UNDER the plugin.
$(".row-totals").orderBy(function() {return +$(this).text();}).appendTo("#container");