Map all Divs values and perform a mathematical operation

Question

I have the following structure:

<div class="product-price">
R$ 140,00
</div>
<div class="product-price">
R$ 165,30
</div>
<div class="product-price">
R$ 12,55
</div>
<div class="product-price">
R$ 25,22
</div>

Among other values that follow the same structure. However, I need to do a js function so that if the value of the product is less than R $ 30, I can not show the number of installments for this product. If it is more than R $ 30, I show the number of installments.

My structure js is this:

function calculaParcelaHome(){
    var regex = /\d+,\d+/g;
    var texto = $(".product-price").text(); // pega o conteúdo da div Preco Avista no arquivo products.tpl
    var valor = regex.exec(texto); //converte a string para int
    var insereValor = parseFloat(valor.join("").replace(",",".")); // converte o valor para Float. 
    console.log(insereValor);

    if (insereValor >= 30) {
        $('.parcelas-produtos').css('display','block');
        console.log("Valor maior que 30");
    }else{
        $('.parcelas-produtos').css('display','none');
        console.log("Valor menor que 30");
    }
}

Only in my job, I can only do the operation for the first div, not the others.

This is the structure of my plots:

<span class="parcelas-produtos">
                                {l s='3 x de'}
                                {if !$priceDisplay}{convertPrice price=$product.price /3}{else}{convertPrice price=$product.price_tax_exc}{/if}
                            </span>

How could I make this logic for others?

Answer 1

Put your code in an element loop that you want, like this:

function calculaParcelaHome(){
  $('.product-price').each(function() {  
    var regex = /\d+,\d+/g;
    var texto = $(this).text(); // pega o conteúdo da div Preco Avista no arquivo products.tpl
    var valor = regex.exec(texto); //converte a string para int
    var insereValor = parseFloat(valor.join("").replace(",",".")); // converte o valor para Float. 
    console.log(insereValor);

    if (insereValor >= 30) {
        $(this).closest('div').find('.parcelas-produtos').show();
        console.log("Valor maior que 30");
    }else{
        $(this).closest('div').find('.parcelas-produtos').hide();
        console.log("Valor menor que 30");
    }
  });
}

calculaParcelaHome();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-price">
R$ 140,00
</div>
<div class="product-price">
R$ 165,30
</div>
<div class="product-price">
R$ 12,55
</div>
<div class="product-price">
R$ 25,22
</div>