計算Parent div中的所有數字，然后對總計進行排序

Question

我想計算內部所有“計數”的每個“行計數”的總數，然后根據“行總數”對“行”進行排序。 但是總數的總和是class =“ count”，而不是“ for each”，僅是其父級“ 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> 

排序插件來自於本主題： 在div標簽和jQuery中按數字對div進行排序

Answer 1

干得好。 代碼用一些指針注釋。 希望這可以幫助。 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");

Answer 2

我沒有測試它，但我認為您的迭代中還需要一個更高的級別。 這應該可以解決問題：

$('.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);
    });
});

然后像往常一樣使用您的排序插件。