Вывести результаты журнала консоли на несколько экземпляров класса div

Question

Это часть 2 вопроса, который у меня был около месяца назад.В то время мне требовался сценарий для циклического просмотра всех продуктов на веб-странице электронной коммерции и расчета процентной экономии в журнале консоли.

Несмотря на то, что это было достигнуто, кажется, при попытке выполнитьприсвойте значения div в HTML.

Алгоритм, который я использую для расчета процентной скидки, выглядит следующим образом:

//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) + "%");
});

В большинстве случаев это именно то, что я хотелэто нужно сделать, но получение этих значений из консольного журнала в html-класс div, кажется, просто хочет захватить первое значение и использовать его по всем направлениям.

Например, когда я подключаю консольное переопределение или любое другоеТип вывода в HTML, DOM захватывает первое значение в массиве элементов журнала консоли и повторно использует это же значение для каждого элемента на странице:

if (typeof console  != "undefined") 
if (typeof console.log != 'undefined')
    console.olog = console.log;
else
    console.olog = function() {};

console.log = function(message) {
console.olog(message);
$('.youSave').append("You Save: " + discount.toFixed(0) + "%");
};
console.error = console.debug = console.info =  console.log

В то время как консоль показывает следующее:

DOM получает только первое значение, а затем повторяет его для всех элементов на странице.

Я хотел бы получить each 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», и именно здесь я хотел бы показать результаты, поступающие из журнала консоли.

Рабочий пример: https://jsfiddle.net/tzhben/sLb16nhg/2/

Answer 1

Немного подправили свой код.Было бы лучше, если бы вы перебрали родительский div .price-wrap.

//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 $priceWrap = $('.price-wrap');
$priceWrap.each(function(k, v){
  let $regPrice = $priceWrap[k].children[0];
  let $salePrice = $priceWrap[k].children[1];
  let $discountPrice = $priceWrap[k].children[2];

  let regPrice = getPrice($regPrice.innerHTML);
  let salePrice = getPrice($salePrice.innerHTML);
  let discount = getDiscount(regPrice, salePrice);

  if ( !isNaN(discount) && discount !== 0 ){
    $discountPrice.innerHTML = discount.toFixed(0) + "%";
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="price-wrap">
    <div class="price regular-price">
      <span>Retail Price:</span>
      $549.00
    </div>
    <div class="price sale-price">
      <span>Our Price:</span>
      $489.00
    </div>
   <div class="youSave"></div>
 </div>
 <div class="price-wrap">
    <div class="price regular-price">
       <span>Retail Price:</span>
       $2599.00
    </div>
    <div class="price sale-price">
      <span>Our Price:</span>
      $2255.00
    </div>
   <div class="youSave"></div>
 </div>
 <div class="price-wrap">
    <div class="price regular-price">
       <span>Retail Price:</span>
       $299.00
    </div>
    <div class="price sale-price">
      <span>Our Price:</span>
      $155.00
    </div>
   <div class="youSave"></div>
 </div>
 <div class="price-wrap">
    <div class="price regular-price">
       <span>Retail Price:</span>
       $699.00
    </div>
    <div class="price sale-price">
      <span>Our Price:</span>
      $555.00
    </div>
   <div class="youSave"></div>
 </div>
 <div class="price-wrap">
    <div class="price regular-price">
       <span>Retail Price:</span>
       $0.00
    </div>
    <div class="price sale-price">
      <span>Our Price:</span>
      $155.00
    </div>
   <div class="youSave"></div>
 </div>