Как пройтись по всем элементам с классом и подсчитать их сумму?

Question

Пытаюсь подсчитать сумму всех текстов в дивов с классом price, как это можно сделать? И как можно удалить пробелы и лишний текст с дива?

<div class="price">100руб</div>
<div class="price">100руб</div>
<script>
    var price=0;
    $('.price').each( function(i) {
        price += Number($(this).textContent);
        document.write(price);
    });
 </script>

Answer 1

Поскольку в диве смешанный контент (цифры+буквы), то можно "откусить" с помощью split буквенную часть:

var price=0;
$('.price').each( function(i) {
  price += +$(this).text().split('р')[0];
});
console.log(price);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="price">100руб</div>
<div class="price">100руб</div>

Answer 2

Ошибки:

Результат нужно выводить после цикла, а не внутри
В цикле each this равен текущему HTML элементу. Этот элемент имеет свойство textContent. Если вы оборачиваете this в элемент jQuery ($(this)) то у вас уже нет свойства textContent, но зато есть метод text(). Так что либо this.textContent, либо $(this).text().

И как можно удалить пробелы и лишний текст с дива?

Если у вас всегда вначале идет число (возможно с лидирующими пробелами), а потом некий текст, то можно воспользоваться функцией parseInt()

jQuery(function($) {
  var price = 0;
  $('.price').each(function() {
    price += parseInt(this.textContent);
  });
  console.log(price);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="price">100руб</div>
<div class="price">100руб</div>

Или на чистом JS без jQuery

var price = 0;
document.querySelectorAll('.price').forEach(function(el) {
  price += parseInt(el.textContent);
});
console.log(price);

<div class="price">100руб</div>
<div class="price">100руб</div>

БЛОГ НА HUSL

Как пройтись по всем элементам с классом и подсчитать их сумму?

Ответы (2 шт):