如何在jquery中进行for循环求和?

Code GuruDev • 5 年前 • 1550 次点击

我需要显示来自两个动态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>

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/43870

1550 次点击

文章 [ 2 ] | 最新文章 5 年前

• 1 楼

John 5 年前

例如,

$(document).ready(function(){
  
  arr = $('#cover>div>p').map(function() {
    return $(this).html();
  });
  
var res = 0;
  for (i = 0; i < arr.length; i++) {
    res = res+parseInt(arr[i]);
    $('#resultTotal').html(res);
  }

});

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

• 2 楼

Rory McCrossan 5 年前

这里有一些问题。首先你应该打电话 get() 使用时 map() 只获取返回的值数组,而不是整个jquery对象集合。

第二,你在第一盘的时候把总数翻了一番 res 到数组中的值,然后重新定义 物件 再加上它的价值…不知为什么。你也在毫无理由地循环两次;一次创建数组,然后再次通过数组。只循环一次。

最后,在处理动态内容时,需要执行这个sum逻辑之后元素已添加。因此,将它放在函数中,并在必要时调用它。

最简单的方法是创建一个 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>

登录后回复