1

我正在尝试创建一个简单的总计，我的基本 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/

4

3 回答 3

5

选择器$('ul li span').not('.total, .header span');将选择span除这些类之外的所有 s 并将它们添加并更新 DOM 中的总数。

使用 nestedeach获取 spans 的 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>

于 2016-09-08T12:20:37.803 回答
1

只是兄弟姐妹的总数！

$(".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>

于 2016-09-08T12:33:34.050 回答
-1 
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);
});
于 2016-09-08T13:09:52.157 回答