Javascript 使用jQuery获取类中所有元素的美元总数

我有以下html：

<div class="balance">
    <div class="heading">
        <p class="total"><span>00</span></p>
    </div>
    <div class="instance withdrawal">
        <h3>Random</h3>
        <p>desc</p>
        <p class="amount">$350.<span>00</span></p>
    </div>
    <div class="instance deposit">
        <h3>Added in</h3>
        <p>desc</p>
        <p class="amount">$1,250.<span>00</span></p>
    </div>
    <div class="instance withdrawal">
        <h3>Bill</h3>
        <p>desc</p>
        <p class="amount">$50.<span>00</span></p>
    </div>
</div>
<!--end wallet-container left-->

00
随机的
描述

$350.00
加入
描述

1250.00美元
比尔
描述

$50.00

我如何使用jQuery添加take total存款，减去取款并将其附加到p.total中？

试试这个

编辑以考虑浮点

JS

$(function() {
  var total = 0;

  // Check each instance
  $('.instance').each(function() {
    var
      $this = $(this),
      clone = $this.find('.amount').clone(),
      amount = 0,
      floating = 0;

    // Get floating point
    floating = parseFloat('0.' + clone.find('span').text());
    clone.find('span').remove();

    // Get integer amount
    amount = parseInt(clone.text().replace(/\D+/gim, ''), 10);

    if (!isNaN(amount) && amount > 0) {
      if ($this.is('.deposit')) total += (amount + floating); // Deposit
      else if ($this.is('.withdrawal')) total -= (amount + floating); // Withdrawal
    }
  });

  // Format total with commas
  var formatted = ('' + parseInt(total, 10)).split('').reverse().join('');
  formatted = formatted.replace(/(\d{3})/gim, '$1,');
  formatted = formatted.split('').reverse();
  if (formatted[0] == ',') formatted.shift();
  formatted = formatted.join('');

  $('.total').text('$' + parseInt(formatted, 10) + '.');

  var decimal = (total - parseInt(total, 10)) * 100;
  $('.total').append('<span>' + decimal + '</span>')
});

$（函数（）{
var合计=0；
//检查每个实例
$（'.instance'）。每个（函数（）{
变量
$this=$（this），
clone=$this.find（'.amount'）.clone（），
金额=0，
浮动=0；
//获取浮点
floating=parseFloat（'0'.+clone.find（'span'）.text（））；
clone.find（'span'）.remove（）；
//获取整数金额
amount=parseInt（clone.text（）.replace（/\D+/gim'，），10）；
如果（！isNaN（金额）&&amount>0）{
如果（$this.is（'.deposit'））总计+=（金额+浮动）；//存款
else if（$this.is（'.drawing'））总计-=（金额+浮动）；//提取
}
});
//使用逗号设置总计格式
var formatted=（“”+parseInt（总计10））.split（“”）.reverse（）.join（“”）；
formatted=formatted.replace（/（\d{3}）/gim，'$1'）；
格式化=格式化。拆分（“”）.reverse（）；
如果（格式化的[0]=='，'）格式化了.shift（）；
格式化=格式化。联接（“”）；
$（'.total'）.text（'$'+parseInt（格式化，10）+'）；
var decimal=（total-parseInt（total，10））*100；
$（'.total'）。追加（''+decimal+''）
});

尝试稍微调整

html

，将

$

字符放在第一个

span

包含整数的元素之前，包括第二个同级

span

元素，该元素包含小数作为

的后代。存款
，
。取款
元素；使用
数据-*
属性来引用包含
取款
、
存款
、
总计
属性的对象
Array.prototype.reduce（）
<代码>编号（）
String.prototype.replace（）
表示逗号
，
字符<代码>.each（）


var res={
押金：0，
撤回：0，
总数：0
};
函数计算（el）{
返回el.get（）.reduce（函数（a，b）{
返回编号（a.textContent.replace（/，/g，“”）+编号（b.textContent）
})
}
美元（“.存款，.取款”）。每个（功能（i，el）{
res[$（el）.data（）.type]+=calculate（$（“span”，el））
})
res.total=res.存款-res.取款；
$（“.total span”）.html（res.total）

00

随机的
描述

$350.00

加入
描述

1250.00美元

比尔
描述

$50.00

您确信这就是您的标记的外观吗？如果是这样的话，这有点不可靠，但应该不会太难实现。为什么标记不可靠？span元素用于设置美分金额的样式。我不会想到将美分与主金额分开，也不会设置任何不同的样式，尽管它应该有效地包括JS，不仅包括html。它适用于作者的示例，但在存款/取款中使用小数时，您应该解析float，因此，您不应该删除“无用的”
。此外，在没有第二个参数的情况下，尽量不要使用
parseInt
，这会产生误导。@Tomisol感谢您指出这一点，我编辑了代码。我不知道parseInt（）的第二个参数，谢谢您的提醒。