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>

排序插件来自此主题：Sorting divs by number inside div tag and jQuery

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

然后像往常一样使用你的排序插件。

计算Parent div中的所有数字，然后在Totals上对它们进行排序

2 个答案: