javascript - 如何总结在jQuery的循环？

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

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

最佳答案

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

其次，首先将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>