来自每个以前的li - jQuery的值的总和

Question

我正在尝试将前一个li中的值相加，并在当前li值下方显示总和

这是html

<ul>
    <li>+2</li>
    <div id="sum" >Sum:</div>
    <li>+2</li>
    <div id="sum" >Sum:</div>
    <li>-1</li>
    <div id="sum" >Sum:</div>
    <li>-1</li>
    <div id="sum" >Sum:</div>                    
</ul> 

我正在寻找的是：

+2 
sum: 2

+2 
sum: 4

-1 
sum: 3

-1
sum: 2

每个中的值都是动态生成的。所以我在jQuery中寻找的东西就像是“在每个前面的li中找到值并在这里给出它们的总和”。

Answer 1

将div移到li

中

尝试循环浏览每个li

然后，您可以通过“移除”li这样的div来获取$(this).clone().find('div').remove().end().text().trim()中的数字

var count = 0;
$("ul li").each(function() {
  var number = $(this).clone().find('div').remove().end().text().trim();
  count += parseInt(number);
  $(this).find("div").text("sum: " + count)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>+2
    <div class="sum">Sum:</div>
  </li>
  <li>+2
    <div class="sum">Sum:</div>
  </li>
  <li>-1
    <div class="sum">Sum:</div>
  </li>
  <li>-1
    <div class="sum">Sum:</div>
  </li>
</ul>

Answer 2

＆＃13;

＆＃13;

var ulChildren = $('ul >');
var result = 0;
for (var i = 0; i < ulChildren.length; i++) {
  var child = ulChildren[i];
  if (child.nodeName === 'LI') {
    result += parseInt(child.innerHTML);
    continue;
  }
  if (child.id === 'sum') {
    child.innerHTML += result;
  }
}
console.log(result);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>

  <li>+2</li>

  <div id="sum">Sum:</div>

  <li>+2</li>

  <div id="sum">Sum:</div>

  <li>-1</li>

  <div id="sum">Sum:</div>

  <li>-1</li>

  <div id="sum">Sum:</div>
</ul>

＆＃13;

＆＃13;

＆＃13;