Question

我有这样的HTML标记：

<div class="FullBox">

 <div class="totalPrice"></div>

 <div class="item">
  <div class="title">Item 1</div>
  <div class="price">$35</div>
 </div>
 <div class="item">
  <div class="title">Item 2</div>
  <div class="price">$58.99</div>
 </div>
</div>

<div class="FullBox">

 <div class="totalPrice"></div>

 <div class="item">
  <div class="title">Item 3</div>
  <div class="price">$22</div>
 </div>
 <div class="item">
  <div class="title">Item 4</div>
  <div class="price">$32</div>
 </div>
</div>

我想输出FullBox类中每个totalPrice的总价格。

最终的HTML应该如下所示：

<div class="FullBox">

 <div class="totalPrice">$93.99</div>

 <div class="item">
  <div class="title">Item 1</div>
  <div class="price">$35</div>
 </div>
 <div class="item">
  <div class="title">Item 2</div>
  <div class="price">$58.99</div>
 </div>
</div>

<div class="FullBox">

 <div class="totalPrice">$54</div>

 <div class="item">
  <div class="title">Item 3</div>
  <div class="price">$22</div>
 </div>
 <div class="item">
  <div class="title">Item 4</div>
  <div class="price">$32</div>
 </div>
</div>

我尝试这样做：

$('.FullBox').each(function() {
  $('.item').each(function() {
    console.log($(this).find('.price').html();
  });
});

但这可以获取页面上每个.price元素的价格，我不确定如何对其进行分组，然后将其分配给我想要的特定div。

Answer 1

不要将每个价格单独打印出来，而是将它们添加到柜台上。另外，您需要将 .item 选择器限制为其父FullBox的范围，所以我使用$(this).find("item")而不是$(".item")

var counter;

$('.FullBox').each(function() {
  counter=0;
  $(this).find('.item').each(function() {
    //console.log($(this).find('.price').html();
    counter=counter + parseFloat($(this).find('.price').html());
  });

  // In the following line (this) refers to the exact parent FullBox:
  $(this).prepend('<div class="totalPrice">$' + counter +'</div>');
});

编辑：由于数字前有$号，因此需要在计算之前将它们转换为纯数字。

counter=counter + parseFloat($(this).find('.price').html().replace('$',''))

Answer 2

// find all the total price to set the html of
$('.totalPrice').html(function(){
                // get the closest fullbox for the total, and find all the prices
  var $prices = $(this).closest('.FullBox').find('.item .price');
  var total = $prices
    // get all the prices without the dollar sign
    .map((_, price) => price.innerHTML.replace('$', ''))
    // get a basic array
    .get()
    // sum the prices, converted to float
    .reduce((sum, price) => sum + parseFloat(price), 0);
  
  // return the total, removing any precision errors
  return '$'+ ( Math.floor( total * 100 ) / 100 );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="FullBox">

  <div class="totalPrice"></div>

  <div class="item">
    <div class="title">Item 1</div>
    <div class="price">$35</div>
  </div>
  <div class="item">
    <div class="title">Item 2</div>
    <div class="price">$58.99</div>
  </div>
</div>

<div class="FullBox">

  <div class="totalPrice"></div>

  <div class="item">
    <div class="title">Item 3</div>
    <div class="price">$22</div>
  </div>
  <div class="item">
    <div class="title">Item 4</div>
    <div class="price">$32</div>
  </div>
</div>

Answer 3

这是普通的Javascript解决方案，它不仅可以更改totalPrice div的内容，还可以创建它们。

const boxes = document.querySelectorAll('.FullBox');

for (const box of boxes) {
  const totalPrice = [...box.querySelectorAll('.price')]
    .map(x => Number(x.textContent.substr(1)))
    .reduce((acc, val) => acc += val);
  const div = document.createElement('div');
  div.className = 'totalPrice';
  div.textContent = `Total: $${totalPrice.toFixed(2)}`;
  box.insertBefore(div, box.firstElementChild);
}

<div class="FullBox">
  <div class="item">
    <div class="title">Item 1</div>
    <div class="price">$35</div>
  </div>
  <div class="item">
    <div class="title">Item 2</div>
    <div class="price">$58.99</div>
  </div>
</div>
<hr />
<div class="FullBox">
  <div class="item">
    <div class="title">Item 3</div>
    <div class="price">$22</div>
  </div>
  <div class="item">
    <div class="title">Item 4</div>
    <div class="price">$32</div>
  </div>
</div>

在jQuery中，在特定项目内执行每个循环

3 个答案: