Как сложить для цикла в JQuery?

Question

Мне нужно показать сумму значений, которая исходит от двух динамических 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>

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>

Answer 2

Рабочий пример,

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