Как суммировать значения div из разных div с одним и тем же классом, используя jQuery?

Question

Я строю блок тележки и хочу получить общую цену за каждый элемент div "row-row", используя jQuery, но я не могу заставить его работать правильно. Более конкретно, для первого предмета общая цена должна быть: 100,40 € + 5,00 € + 15,00 € + 15,00 € = 135,40 € Вместо этого я получаю сумму 200,80 € на общую стоимость обоих предметов!

Как вы можете видеть из приведенного ниже кода результаты совершенно неверны. Чего мне не хватает?

Вот мой код:

$(document).ready(function() {
  var sum = 0.00;

  $(".item-row").each(function() {
    var val = $.trim($(".cart-item-price").text());
    if (val) {
      val = parseFloat(val.replace(/^\$/, ""));
      sum += !isNaN(val) ? val : 0;
    }
  });

  $(".item-total-price").html('<span style="color:red;float:left;">Item total price: </span>' + sum.toFixed(2) + "€");

  /* alert(sum); */
});

.item-title {
  float: left;
  width: 150px;
}

.cart-item-price {
  float: left;
  text-align: right;
  width: 100px;
}

.item-extra {
  float: left;
  width: 150px;
  font-weight: 200;
}

.item-total-price {
  width: 250px;
  text-align: right;
  margin-top: 25px;
  display: block;
  clear: both;
  margin-bottom: 25px;
  overflow: hidden;
}

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

<div class="item-row">
  <div class="item-title">iPhone 12: </div>
  <div class="cart-item-price">100.40€</div>
  <br/>
  <div class="item-extra">Case: </div>
  <div class="cart-item-price">5.00€</div>
  <br/>
  <div class="item-extra">Color Red: </div>
  <div class="cart-item-price">15.00€</div>
  <br/>
  <div class="item-extra">Power Bank: </div>
  <div class="cart-item-price">15.00€</div>
  <div class="item-total-price"></div>
</div>
<div class="item-row">
  <div class="item-title">Samsung Galaxy S88: </div>
  <div class="cart-item-price">982.40€</div>
  <br/>
  <div class="item-extra">Case: </div>
  <div class="cart-item-price">3.80€</div>
  <br/>
  <div class="item-extra">Color Red: </div>
  <div class="cart-item-price">9.00€</div>
  <br/>
  <div class="item-extra">Power Bank: </div>
  <div class="cart-item-price">15.40€</div>
  <div class="item-total-price"></div>
</div>

Answer 1

Здесь есть пара вопросов. Основная проблема заключается в том, что вам нужно выбрать соответствующие элементы .cart-item.price и .item-total-price только в current .item-row. Для этого вы можете использовать $(this).find().

Во-вторых, вам нужно еще l oop через все .cart-item-price элементов в текущем .item-row, чтобы вычислить sum.

Наконец, вам нужно поместить var sum = 0 в внешний each() л oop. Попробуйте это:

jQuery(function($) {
  $(".item-row").each(function() {
    var sum = 0.00;
    $(this).find('.cart-item-price').each(function() {
      sum += parseFloat($(this).text().trim()) || 0;
    });

    $(this).find(".item-total-price").html('<span>Item total price: </span>' + sum.toFixed(2) + "€");
  });
});

.item-title {
  float: left;
  width: 150px;
}

.cart-item-price {
  float: left;
  text-align: right;
  width: 100px;
}

.item-extra {
  float: left;
  width: 150px;
  font-weight: 200;
}

.item-total-price {
  width: 250px;
  text-align: right;
  margin-top: 25px;
  display: block;
  clear: both;
  margin-bottom: 25px;
  overflow: hidden;
}

.item-total-price span {
  color: red;
  float: left;
}

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

<div class="item-row">
  <div class="item-title">iPhone 12: </div>
  <div class="cart-item-price">100.40€</div>
  <br/>
  <div class="item-extra">Case: </div>
  <div class="cart-item-price">5.00€</div>
  <br/>
  <div class="item-extra">Color Red: </div>
  <div class="cart-item-price">15.00€</div>
  <br/>
  <div class="item-extra">Power Bank: </div>
  <div class="cart-item-price">15.00€</div>
  <div class="item-total-price"></div>
</div>
<div class="item-row">
  <div class="item-title">Samsung Galaxy S88: </div>
  <div class="cart-item-price">982.40€</div>
  <br/>
  <div class="item-extra">Case: </div>
  <div class="cart-item-price">3.80€</div>
  <br/>
  <div class="item-extra">Color Red: </div>
  <div class="cart-item-price">9.00€</div>
  <br/>
  <div class="item-extra">Power Bank: </div>
  <div class="cart-item-price">15.40€</div>
  <div class="item-total-price"></div>
</div>

Answer 2

Есть несколько проблем с javascript.
Inside $ (". Item-row"). Each (), вы должны получить все .cart-item-price div и подвести итог те, которые используют еще одну внутреннюю функцию .each ().

Просто замените ваш javascript на ниже, и все должно работать как положено:

$(document).ready(function() {

  $( ".item-row" ).each(function( index ) {
     var sum = 0.00;
     $( this ).find( ".cart-item-price" ).each(function( index2 ) { 
        var val = $( this ).text();
        if (val) {
           val = parseFloat(val.replace(/^\$/, ""));
           sum += !isNaN(val) ? val : 0;
        }
     });

     $( this ).find( ".item-total-price").first().html('<span style="color:red;float:left;">Item total price: </span>' + sum.toFixed(2) + "€");

  })
});

Answer 3

Вы выбираете все цены и складываете их (из обеих строк), а затем выбираете оба значения total-price и устанавливаете одинаковую сумму для обоих. Вот почему это не работает.

Вам нужно сменить логи c. Начало хорошее. Итерируйте по строкам с each

, но затем выберите цены, соответствующие этой указанной c строке. Так что используйте ключевое слово this. И то же самое с total-price

См. Ниже

$(document).ready(function(){


  $(".item-row").each(function() {
    var sum = 0.00;
    var itemPrices = $(this).find(".cart-item-price")
    $(itemPrices).each(function() {
      var val = $.trim( $(this).text() );
      if ( val ) {
          val = parseFloat( val.replace( /^\$/, "" ) );
          sum += !isNaN( val ) ? val : 0;
       }
     })
    var totalPrice = $(this).find(".item-total-price");
    totalPrice.html('<span style="color:red;float:left;">Item total price: </span>' + sum.toFixed(2) + "€");
  });

					  
/* alert(sum); */

});

.item-title { 
float:left;
width:150px;

}

.cart-item-price{
float:left;
text-align:right;
width:100px;

}

.item-extra { 
float:left;
width:150px;
font-weight:200;
}

.item-total-price {
  width:250px;
  text-align:right;
  margin-top:25px;
  display:block;
  clear:both;
  margin-bottom:25px;
  overflow:hidden;
 
}

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

<div class="item-row">

<div class="item-title">iPhone 12: </div>
<div class="cart-item-price">100.40€</div>
<br/>
<div class="item-extra">Case: </div>
<div class="cart-item-price">5.00€</div>
<br/>
<div class="item-extra">Color Red: </div>
<div class="cart-item-price">15.00€</div>
<br/>
<div class="item-extra">Power Bank: </div>
<div class="cart-item-price">15.00€</div>

<div class="item-total-price"></div>

</div>


<div class="item-row">

<div class="item-title">Samsung Galaxy S88: </div>
<div class="cart-item-price">982.40€</div>
<br/>
<div class="item-extra">Case: </div>
<div class="cart-item-price">3.80€</div>
<br/>
<div class="item-extra">Color Red: </div>
<div class="cart-item-price">9.00€</div>
<br/>
<div class="item-extra">Power Bank: </div>
<div class="cart-item-price">15.40€</div>

<div class="item-total-price"></div>

</div>