Take out the percentage between 2 amounts in different jQuery elements

Question

Take out the percentage between 2 amounts in different jQuery elements

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I need you not to give me back NaN. In div.calculado I must put the% of each comparison (percentage discounted). There is no problem when it is a single operation, then what I need is that it is cyclical (the first price_sale is compared with the first price_compare, in the next div.element the same thing happens) I will appreciate your help, I hope to have been clear.

$(document).ready(function(){
      $ve = $('.price_sale').text().split('S/. ').join('');
      $nor = $('.price_compare').text().split('S/. ').join('');
      $porc = $nor-$ve;
      $pare = $porc/($nor/100);
  		$('.calculado').text($pare + '% DESCUENTO');

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="element">
PRIMERA COMPARACION
    <div class="price_sale">S/. 99.90</div>
    <div class="price_compare">S/. 200.00</div>
PRIMER RESULTADO
    <div class="calculado"></div>
  </div><br/>

<div class="element">
SEGUNDA COMPARACION
  <div class="price_sale">S/. 99.90</div>
  <div class="price_compare">S/. 200.00</div>
SEGUNDO RESULTADO
  <div class="calculado"></div>
</div><br/>

<div class="element">
TERCERA COMPARACION
  <div class="price_sale">S/. 99.90</div>
  <div class="price_compare">S/. 200.00</div>
TERCER RESULTADO
  <div class="calculado"></div>
</div>

javascript jquery

asked by Marco Torres 07.02.2018 в 01:13

source

2 answers

1

Check out this example, I hope I can help you.

$(document).ready(function(){
      
      //Itero .element
      //Recorro .element clase que contiene las demas clases
      $.each($('.element'),function(i,v){
        //utilizo el metodo find para buscar dentro del elemento actual
        // v = elemento iterado actualmente
        var priceSale = $(v).find('.price_sale').text().replace('S/. ','');   
        //Pongo replace para quitar S/.  y que lo pueda tomar como un numero
        //console.log(priceSale);
        var pricecompare = $(v).find('.price_compare').text().replace('S/. ','');   
        //Realizo los calculos
        //console.log(pricecompare);
        var porc = pricecompare - priceSale;
        //console.log(porc);
        var pare = porc/(pricecompare/100);
        console.log(pare);
        //Muestro el resultado en la clase calculado del elemento iterado actualmente
        $(v).find('.calculado').text(pare + ' %');
      });

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="element">
PRIMERA COMPARACION
    <div class="price_sale">S/. 90.00</div>
    <div class="price_compare">S/. 10.00</div>
PRIMER RESULTADO
    <div class="calculado"></div>
  </div><br/>

<div class="element">
SEGUNDA COMPARACION
  <div class="price_sale">S/. 99.90</div>
  <div class="price_compare">S/. 200.00</div>
SEGUNDO RESULTADO
  <div class="calculado"></div>
</div><br/>

<div class="element">
TERCERA COMPARACION
  <div class="price_sale">S/. 99.90</div>
  <div class="price_compare">S/. 200.00</div>
TERCER RESULTADO
  <div class="calculado"></div>
</div>

answered by 07.02.2018 в 02:10

Class constructors can not be invoked without 'new' How to make this query in sql server 2014?

score 1 · Accepted Answer

There are several points to review. You can generate a each when you have several similar elements, in this case the div with class element. I just included the loop to your same function, and changed the .text () from jQuery to the innerHTML javascript so you can recognize the indexes of the elements.

$(document).ready(function(){
  $(".element").each(function (idx, row) {
      $ve = $('.price_sale')[idx].innerHTML.split('S/. ').join('');
      $nor = $('.price_compare')[idx].innerHTML.split('S/. ').join('');
      $porc = $nor-$ve;
      $pare = $porc/($nor/100);
  		$('.calculado')[idx].innerHTML = $pare + '% DESCUENTO';
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="element">
PRIMERA COMPARACION
    <div class="price_sale">S/. 99.90</div>
    <div class="price_compare">S/. 200.00</div>
PRIMER RESULTADO
    <div class="calculado"></div>
  </div><br/>

<div class="element">
SEGUNDA COMPARACION
  <div class="price_sale">S/. 99.90</div>
  <div class="price_compare">S/. 200.00</div>
SEGUNDO RESULTADO
  <div class="calculado"></div>
</div><br/>

<div class="element">
TERCERA COMPARACION
  <div class="price_sale">S/. 99.90</div>
  <div class="price_compare">S/. 200.00</div>
TERCER RESULTADO
  <div class="calculado"></div>
</div>