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

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 に答える