Estou com um problema ao calcular e exibir o preço em R$ por pessoa em uma tabela.
No HTML abaixo, temos a quantidade de pessoas e uma tabela, nessa tabela temos o preço do plano e um campo em branco <p class="pax-number"></p>
onde deverá exibir o preço por pessoa.
Me parecia simples até então, eu usei cada <p class="preco-plano"></p>
para fazer um loop e transformar os valores em numero, calcular com a quantidade de pessoas e alterar o texto, porém não está sendo tão simples assim... Vejam o exemplo abaixo:
$(document).ready( ()=> {
//seleciona a quantidade de pessoas e transforma em um numero inteiro
let paxNumber = parseInt(($(".pessoas .field-title").text()).split(" ")[0]);
$('.preco-plano').each( ()=> {
//seleciona o preço do plano e transforma em um numero inteiro
let priceNumber = parseInt($(this).text().split('$')[1]);
//calcula o preço por pessoa
let pricePerPerson = priceNumber / paxNumber;
//seleciona o campo onde deve ser exibido o valor por pessoa e escreve
$(this).closest('p').find('.pax-number').html('R$' + pricePerPerson + 'por pessoa');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="pessoas">
<span class="field-title">4 pessoas</span>
</div>
<table class="tabela-resultados">
<tr class="">
<td class="bloco-preco" style="height: 180px;">
<p class="nome-plano">Plano Tal</p>
<span>
<p class="desconto">R$555,00</p>
<p class="preco-plano">R$316</p>
<p class="pax-number" style="color: green; font-size: 10px;"></p>
</span>
</td>
</tr>
<tr class="">
<td class="bloco-preco" style="height: 180px;">
<p class="nome-plano">Plano XYZ</p>
<span>
<p class="desconto">R$555,00</p>
<p class="preco-plano">R$420</p>
<p class="pax-number" style="color: green; font-size: 10px;"></p>
</span>
</td>
</tr>
<tr class="">
<td class="bloco-preco" style="height: 180px;">
<p class="nome-plano">Plano Cucurioso</p>
<span>
<p class="desconto">R$555,00</p>
<p class="preco-plano">R$188</p>
<p class="pax-number" style="color: green; font-size: 10px;"></p>
</span>
</td>
</tr>
</table>
<script src="jquery-3.2.1.min.js"></script>
acredito que o problema esteja quanto eu seleciono o valor e transformo em um numero inteiro let paxNumber = parseInt(($(".pessoas .field-title").text()).split(" ")[0]);
pois ele não me da um numero, se eu tenho utilizar o seletor $('.preco-plano')
ao invés de $(this)
ele me retorna um NaN pq ele não pega apenas o valor daquele bloco, mas sim de todos os blocos da tabela.
Tentei fazer algo parecido usando o for
mas sem sucesso também.
Alguém conseguiria me dar uma luz, de o que estou fazendo de errado?
Agradeço desde já!