使用jQuery獲取行總和

Question

我正在嘗試創建一個簡單的匯總器，我的基本html如下所示：

<ul>
    <li class="header">
        <span>&nbsp;</span>
        ...
        <span>Total</span>
    </li>
    <li>
        <span>0</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span class="total">0</span>
    </li>
    <li>
        <span>1</span>
        <span>10</span>
        <span>20</span>
        <span>30</span>
        <span>40</span>
        <span>50</span>
        <span class="total">0</span>
    </li>
    <li>
        <span>5</span>
        <span>1</span>
        <span>1</span>
        <span>9</span>
        <span>3</span>
        <span>2</span>
        <span class="total">0</span>
    </li>
</ul>

jQuery函數：

var eaList = $('ul li span').not('.total, .header span');
var sum = 0;
eaList.each(function(){
    var total = $(this).parent().find('.total');
    sum += parseFloat($(this).text());
    total.text(sum);
});

當前，這是在函數末尾而不是按行累加起來的總數。

我希望這是一個簡單選擇器的情況var total = $(this).parent().find('.total'); （我也嘗試過var total = $(this).closest('.total');

在將總和輸出到.total元素之前，是否需要一個空數組來將總數推入？ 還是在內置的jquery中應該使用正確的選擇器返回總和？

JSFIDDLE： https ：//jsfiddle.net/lharby/y991hkf6/

Answer 1

選擇器$('ul li span').not('.total, .header span'); 將選擇除這些類之外的所有span並添加它們並更新DOM中的總數。

使用嵌套的each獲取跨度的textContent並將其添加。

// Get all the `li`s inside `ul` except header
$('ul li:not(.header)').each(function () {

    // Initialize total to zero
    var total = 0;

    // Get all the spans inside current `li`
    // except the `.total`
    $(this).find('span:not(.total)').each(function () {

        // Add the value to total
        // If no value, then add zero
        total += Number($(this).text()) || 0;
    });

    // Update the total in the `.total` of current `li`
    $('.total', this).text(total);
});

 $('ul li:not(.header)').each(function() { var total = 0; $(this).find('span:not(.total)').each(function() { total += Number($(this).text()) || 0; }); $('.total', this).text(total); }); 

 body { font-family: sans-serif; font-size: 11px; background: #F3F5F6; } ul { margin: 0; padding: 0; } li { list-style: none; margin: 0 1px 3px 0; } .header span { background: none; } span { display: inline-block; width: 25px; height: 25px; background: #FFF; text-align: center; line-height: 25px; } .total { font-weight: bold; font-size: 1.2em; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="header"> <span>&nbsp;</span> <span>&nbsp;</span> <span>&nbsp;</span> <span>&nbsp;</span> <span>&nbsp;</span> <span>&nbsp;</span> <span>Total</span> </li> <li> <span>0</span> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span class="total">0</span> </li> <li> <span>1</span> <span>10</span> <span>20</span> <span>30</span> <span>40</span> <span>50</span> <span class="total">0</span> </li> <li> <span>5</span> <span>1</span> <span>1</span> <span>9</span> <span>3</span> <span>2</span> <span class="total">0</span> </li> </ul> 

Answer 2

只是兄弟姐妹們！

 $(".total").each(function() { var total = 0; $(this).siblings().each(function() { total += parseInt($(this).text()); }); $(this).text(total); }); 

 body { font-family: sans-serif; font-size: 11px; } ul { margin: 0; padding: 0; } li { list-style: none; margin: 0 1px 3px 0; } .header span { background: none; } span { display: inline-block; width: 25px; height: 25px; background: #FFF; text-align: center; line-height: 25px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <ul> <li class="header"> <span>&nbsp;</span> <span>&nbsp;</span> <span>&nbsp;</span> <span>&nbsp;</span> <span>&nbsp;</span> <span>&nbsp;</span> <span>Total</span> </li> <li> <span>0</span> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span class="total">0</span> </li> <li> <span>1</span> <span>10</span> <span>20</span> <span>30</span> <span>40</span> <span>50</span> <span class="total">0</span> </li> <li> <span>5</span> <span>1</span> <span>1</span> <span>9</span> <span>3</span> <span>2</span> <span class="total">0</span> </li> </ul> 

Answer 3

Try this:
$('ul li:not(.header)').each(function () {
    var sum = $(this).find('span:not(.total)').map(function () { 
        return parseFloat($(this).text()); 
    }).get().reduce((a, b) => a + b, 0);

    $(this).find('.total').text(sum);
});