jquery - 使用 jQuery 将值相加然后触发结果

Question

我试图获取列表中的不同值，将它们相加，如果值大于 150，则会将一个类添加到指定的 div 中。这是我正在使用的 HTML:

<ul class="fc_cart_item_options">
<li class="fc_cart_item_option fc_cart_item_weight">Weight: 70 <span class="fc_uom_weight">LBS</span></li>
<li class="fc_cart_item_option fc_cart_item_weight">Weight: 81 <span class="fc_uom_weight">LBS</span></li>
</ul>

我想要弄清楚的是，如何使用 jQuery 将上面显示的这些不同列表项的值相加，以及当它们大于 150 时，向特定的 div 添加一个类？在某些情况下，我可能只有一个权重大于 150 的列表项，而在某些情况下，我可能有 20 个列表项，它们的权重之和大于 150，因此需要相同的结果，即向特定类别添加一个类分区。

我的目标是，如果上面的列表项的值大于 150，则类为“gt_150”的 div 将添加“foo”类。希望这是有道理的。

======

编辑:

在从其他人那里得到一些很好的答案后，刚刚遇到了一个小问题(再次非常感谢大家的立即回复)。

我没有考虑到的一件事是数量。我的意思是这样的:列表项的重量可能为 70 磅，但数量可能为 3(210 磅)，这使其超出了重量限制。问题在于当前的解决方案，这没有考虑给定列表项的数量。这个解决方案(下面提供的第一个响应)效果很好，但我忘记考虑以下因素。

<table>
<tr class="fc_cart_item">
<td>
    <ul class="fc_cart_item_options">
    <li class="fc_cart_item_option fc_cart_item_weight">
    Weight: 70 <span class="fc_uom_weight">LBS</span>
    </li>
    </ul>
</td>
<td class="fc_cart_item_quantity">3</td>
</tr>
</table>

在上面的 HTML 中，列表项本身可能只有 70 磅(这不会导致 jQuery 将类“foo”添加到特定的 div)，但如果数量是 3，我需要考虑因素那个。

在所有列表项的情况下，下一个包含数量的单元格将紧随其后。

Answer 1

$('.fc_cart_item').each(function() {
  var total = 0;
  $(this).find('.fc_cart_item_weight').each(function() {
     var weight = parseInt($(this).text().split(' ')[1]);
     total += weight;
  });

  var qty = parseInt($(this).find('.fc_cart_item_quantity').text());
  total *= qty;
  if(total > 150)
    $('.gt_150').addClass('foo');
});