javascript - 我需要用最少的脚本或 Jquery 代码对 html 页面中的值求和

Question

我的 html 代码:

<tr>
    <td class="cart_product">
        <a href="">
            <img src="images/cart/two.png" alt="">
        </a>
    </td>
    <td class="cart_description">
        <h4>
            <a href="">Colorblock Scuba</a>
        </h4>
        <p>Web ID: 1089772</p>
    </td>
    <td class="cart_price">
        <p>$59</p>
    </td>
    <td class="cart_quantity">
        <div class="cart_quantity_button">
            <a class="cart_quantity_up" href=""> + </a>
            <input class="cart_quantity_input" type="text" name="quantity" value="1" autocomplete="off" size="2">
            <a class="cart_quantity_down" href=""> - </a>
        </div>
    </td>
    <td class="cart_total">
        <p class="cart_total_price" name="price" id="price" class="price">$59</p>
    </td>
    <td class="cart_delete">
        <a class="cart_quantity_delete" href="">
            <i class="fa fa-times"></i>
        </a>
    </td>
</tr>

这里我有一个显示产品价格的 para 标签。我会动态填充它，在实际情况下会有行数。我需要的是 para 标签中的值:

<td class="cart_total">
    <p class="cart_total_price" name="price" id="price" class="price">$59</p> 
</td>

需要求和。

Answer 1

您可以像这样简单地使用 jQuery。

$(document).ready(function() {
  var total = 0;
  $(".cart_price p").each(function(index){  
    var price = $(this).text();
    price = price.replace("$","");
    total += parseFloat(price);
  });
  console.log(total);//total price result
  $("#price").text("$"+total);
});