使用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

选择器span将选择除这些类之外的所有each并添加它们并更新DOM中的总数。

使用嵌套的// 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); }); 获取跨度的textContent并添加它们。

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

*py

＆＃13;

＆＃13;

＆＃13;

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