javascript - 如何在jquery中的for循环中求和？

Question

我需要显示来自两个动态 div 的值的总和，但下面我提到了 div 的静态版本。任何人都可以帮助我解决这个小小的 jquery 难题:

$(document).ready(function(){
  
  arr = $('#cover div p').map(function() {
    return $(this).html();
  });

  for (i = 0; i < arr.length; i++) {
    var res = parseInt(arr[i]);
    var res = res+parseInt(arr[i]);
    $('#resultTotal').html(res);
  }

});

.slider
{
  background-color: blue;
  color:white;
  padding: 5px 10px;
  margin: 10px;
}

#resultTotal
{
  background-color: green;
  padding: 20px 10px ;
  margin: 10px;
  color:white;
}

<div id="cover">
  <div class="slider">
    <p class="content">100</p>
  </div>
  <div class="slider">
    <p class="content">200</p>
  </div>
</div>

<div id="resultTotal"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

这里有几个问题。首先你应该调用get()使用 map() 时只获取您返回的值数组，而不是整个 jQuery 对象集合。

其次，您在第一次设置时将总数翻了一番 res到数组中的值，然后重新定义 res并再次为其添加值......出于某种原因。你也无缘无故地循环了两次；一次创建数组并再次通过数组。只循环一次。

最后，当您处理动态内容时，您需要在添加元素后执行此求和逻辑。因此，将它放在函数中并在需要时调用它。

实现此目的的最简单方法是创建一个 total随 p 的文本值递增的变量在 each() 内循环，像这样:

$(document).ready(function() {
  // after you add the dymamic .slider p elements:
  calculateAndDisplayTotal();
});

function calculateAndDisplayTotal() {
  var total = 0;
  $('#cover div p').each(function() {
    total += parseInt($(this).text(), 10);
  });
  
  $('#resultTotal').text(total);
}

.slider {
  background-color: blue;
  color: white;
  padding: 5px 10px;
  margin: 10px;
}

#resultTotal {
  background-color: green;
  padding: 20px 10px;
  margin: 10px;
  color: white;
}

<div id="cover">
  <div class="slider">
    <p class="content">100</p>
  </div>
  <div class="slider">
    <p class="content">200</p>
  </div>
</div>

<div id="resultTotal"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>