使用 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 中是否有内置的东西应该 return 使用正确的选择器求和？

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

Answer 1

select 或 $('ul li span').not('.total, .header span'); 将 select 除那些类之外的所有 span 并将它们相加并更新 [=27] 中的总数=].

使用嵌套each获取span的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);
});

使用 jquery 获取行的总和

Get sums of rows with jquery

javascript

jquery

jquery-selectors

sum

dom-node