使用jquery获取行的总和

Question

我正在尝试创建一个简单的totaller,我的基本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除这些类之外的所有s,并添加它们并更新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>