Javascript 将控制台日志结果打印到div类的多个实例

这是我一个月前提出的一个问题的第二部分。当时，我需要一个脚本来循环浏览电子商务网页上的所有产品，并计算控制台日志中的节省百分比

虽然已经实现了这一点，但当我尝试在HTML中将值分配给div时，似乎存在一个问题

我用于百分比折扣计算的算法如下所示：

//Calculate savings per item
function getPrice(elem){
  return elem.match(/\d+.\d{0}/);
}

function getDiscount(regPrice, salePrice){
  let disc = (regPrice - salePrice) * 100 / regPrice;
  return disc < 0 ? 0 : disc;
}

let $regPrice = $('.regular-price');
let $salePrice = $('.sale-price');

$regPrice.each(function(k, v){
  let regPrice = getPrice($regPrice[k].innerHTML);
  let salePrice = getPrice($salePrice[k].innerHTML);
  let discount = getDiscount(regPrice, salePrice);

  console.log("You Save: " + discount.toFixed(0) + "%");
});

而控制台显示以下内容：

DOM只获取第一个值，然后在页面上的所有项目上重复该值

我想让每个div类显示准确的节省百分比，同时悄悄地丢弃“NaN”或0%的结果。基本上应显示大于1的任何值

产品页面上的HTML输出结构如下：

<div class="col-xs-12 col-sm-6 col-md-3 product-grid-item">
  <div class="panel panel-default">
    <div class="panel-body text-center shadow" style="height: 341.2px;">
        <a href="/link1.aspx" class="grid-product-link">
          <div class="grid-item-image-wrap">
                <img src="ae00-3487.jpg" alt="alt-text-here" class="grid-item-image product-image center-block">
            </div>
            <div class="grid-item-name-wrap">Product 1 (over 1k)</div>
        </a>
    </div>
    <div class="panel-footer text-center">
        <div class="grid-item-price-wrap">
            <a href="link1.aspx" class="price-button">
                <div class="price-wrap">
                    <div class="price regular-price">
                        <span>Retail Price:</span> 
                        $2,249.00
                    </div>
                    <div class="price sale-price alert alert-green shadow">
                        <span>Our Price:</span>
                        $1,759.00
                    </div>
                    <div class="youSave text-uppercase text-success"></div> 
                    <meta itemprop="price" content="1759.0000">
                    <meta itemprop="priceCurrency" content="USD">
                </div>
            </a>
        </div>
    </div>
    <div class="grid-item-promotions-wrap"></div>
  </div>
 </div>
 <div class="col-xs-12 col-sm-6 col-md-3 product-grid-item">
    <div class="panel panel-default">
      <div class="panel-body text-center shadow" style="height: 341.2px;">
          <a href="link2.aspx" class="grid-product-link">
              <div class="grid-item-image-wrap">
                  <img src="ae00-1856.jpg" alt="alt-text-here" class="grid-item-image product-image center-block">
              </div>
              <div class="grid-item-name-wrap">Product 2 (under 1k)</div>
          </a>
      </div>
      <div class="panel-footer text-center">
        <div class="grid-item-price-wrap">
            <a href="link2.aspx" class="price-button">
                <div class="price-wrap">
                    <div class="price regular-price">
                        <span>Retail Price:</span> 
                        $559.00
                    </div>
                    <div class="price sale-price alert alert-green shadow">
                        <span>Our Price:</span> 
                        $439.00
                    </div>
                    <div class="youSave text-uppercase text-success">You Save: 21%</div> 
                    <meta itemprop="price" content="439.0000">
                    <meta itemprop="priceCurrency" content="USD">
                </div>
            </a>
        </div>
      </div>
      <div class="grid-item-promotions-wrap"></div>
     </div>
    </div>

并在页面上的所有产品中遵循此模式。我已经在页面中放置了自动关闭的div类“youSave”，这就是我想显示控制台日志结果的地方

工作示例：

---

对代码进行了一些调整。如果迭代父div

.price wrap

，效果会更好

//计算每个项目的节省
函数getPrice（elem）{
返回元素匹配（/\d+。\d{0}/）；
}
函数get折扣（regPrice，salePrice）{
let disc=（regPrice-salePrice）*100/regPrice；
返回圆盘<0？0：圆盘；
}
让$priceWrap=$（'.price wrap'）；
$priceWrap.每个函数（k，v）{
让$regPrice=$priceWrap[k]。子项[0]；
让$salePrice=$priceWrap[k]。子对象[1]；
let$discountPrice=$priceWrap[k]。儿童[2]；
让regPrice=getPrice（$regPrice.innerHTML）；
让salePrice=getPrice（$salePrice.innerHTML）；
let折扣=Get折扣（regPrice，salePrice）；
如果（！isNaN（折扣）&折扣！==0）{
$discountPrice.innerHTML=discount.toFixed（0）+“%”；
}
});

零售价：
$549.00
我们的价格：
$489.00
零售价：
$2599.00
我们的价格：
$2255.00
零售价：
$299.00
我们的价格：
$155.00
零售价：
$699.00
我们的价格：
$555.00
零售价：
$0.00
我们的价格：
$155.00
你能发布一个精确的工作示例吗？上面添加了fiddle。你只需要放弃0%？我需要它出现在“youSave”div中，并放弃0%或有时是“NaN”。谢谢。非常感谢@BlackPearlOne在这里的评论@BlackPearl，任何超过1000美元的价格似乎都不算。1k以下的所有价格均按预期运行。有什么想法吗？比如？输入示例？当然，逗号不起作用。我更改了fiddle中的
getPrice
函数以替换逗号。您可以检查它，但我建议您寻找更好的方法来解析int。只需将方法
getPrice
更改为
return elem.replace（/，/g'，）.match（/\d+。\d{0}/）
<div class="col-xs-12 col-sm-6 col-md-3 product-grid-item">
  <div class="panel panel-default">
    <div class="panel-body text-center shadow" style="height: 341.2px;">
        <a href="/link1.aspx" class="grid-product-link">
          <div class="grid-item-image-wrap">
                <img src="ae00-3487.jpg" alt="alt-text-here" class="grid-item-image product-image center-block">
            </div>
            <div class="grid-item-name-wrap">Product 1 (over 1k)</div>
        </a>
    </div>
    <div class="panel-footer text-center">
        <div class="grid-item-price-wrap">
            <a href="link1.aspx" class="price-button">
                <div class="price-wrap">
                    <div class="price regular-price">
                        <span>Retail Price:</span> 
                        $2,249.00
                    </div>
                    <div class="price sale-price alert alert-green shadow">
                        <span>Our Price:</span>
                        $1,759.00
                    </div>
                    <div class="youSave text-uppercase text-success"></div> 
                    <meta itemprop="price" content="1759.0000">
                    <meta itemprop="priceCurrency" content="USD">
                </div>
            </a>
        </div>
    </div>
    <div class="grid-item-promotions-wrap"></div>
  </div>
 </div>
 <div class="col-xs-12 col-sm-6 col-md-3 product-grid-item">
    <div class="panel panel-default">
      <div class="panel-body text-center shadow" style="height: 341.2px;">
          <a href="link2.aspx" class="grid-product-link">
              <div class="grid-item-image-wrap">
                  <img src="ae00-1856.jpg" alt="alt-text-here" class="grid-item-image product-image center-block">
              </div>
              <div class="grid-item-name-wrap">Product 2 (under 1k)</div>
          </a>
      </div>
      <div class="panel-footer text-center">
        <div class="grid-item-price-wrap">
            <a href="link2.aspx" class="price-button">
                <div class="price-wrap">
                    <div class="price regular-price">
                        <span>Retail Price:</span> 
                        $559.00
                    </div>
                    <div class="price sale-price alert alert-green shadow">
                        <span>Our Price:</span> 
                        $439.00
                    </div>
                    <div class="youSave text-uppercase text-success">You Save: 21%</div> 
                    <meta itemprop="price" content="439.0000">
                    <meta itemprop="priceCurrency" content="USD">
                </div>
            </a>
        </div>
      </div>
      <div class="grid-item-promotions-wrap"></div>
     </div>
    </div>