1

Boa tarde amigos, estou com dificuldades em encontrar uma solução lógica para resolver meu problema em um loop (for)

Dentro de uma tabela, temos uma informação de preço na tag: <p class="preco-plano">R$44</p> e criei uma tag em branco:<p class="milesQnt"></p>para a quantidade de milhas no caso. A quantidade de milhas é de 1 para 1, ou seja 1 real equivale uma milha, portanto na <tr>onde o valor for 420 reais, a quantidade de milhas deve ser 420 reais.

Vejam o código abaixo:

 $(function(){
                $(document).ready(function(){
                    let milesToWrite = $('.milesNumber');
                    let tableRow = $('tr');
                    for(i=0; i<tableRow.length; i++) {
                        let milesNumber = $('tableRow[i] preco-plano').split('$')[1];
                        milesToWrite.textContent = milesNumber + "milhas";
                    }
                });
            });
<table class="tabela resultados">
            <tr>
                <th>Preço</th>
                <th>Milhas</th>
            </tr>
            <tr>
                <td><p class="preco-plano">R$44</p></td>
                <td>
                    <span><p class="milesQnt"></p></span>
                    <span><input type="button" value="AVANÇAR"></span>
                </td>
            </tr>
            <tr>
                <td><p class="preco-plano">R$140</p></td>
                <td>
                    <span><p class="milesQnt"></p></span>
                    <span><input type="button" value="AVANÇAR"></span>
                </td>
            </tr>
            <tr>
                <td><p class="preco-plano">R$420</p></td>
                <td>
                    <span><p class="milesQnt"></p></span>
                    <span><input type="button" value="AVANÇAR"></span>
                </td>
            </tr>
        </table>
        <script src="skin/jquery-3.2.1.min.js"></script>

Eu fiz um laço de repetição que deve passar por todas as <tr> da tabela e alterar o valor da tag de milhas em branco pelo número que há na tag de preço... porém ao tentar acessar o preço do plano dentro da tableRow[i] (que é a tr que o loop está no momento) da erro. eu compreendo que minha semântica está errada, porém ao tentar acessar o "preco-plano" sem definir a posição do loop, ele altera apenas a primeira tag e não as demais.

Preciso de sugestões!

eu poderia chamar primeiro a variável e depois usar o jquery para selecionar a query do preço? por exemplo criar uma variável: let x = $('.preco-plano') e então chamar desta forma dentro do loop tableRow[i].x ?

Eu deveria usar o forEach invés do for para o loop?

minha lógica está errada, deveria fazer o loop direto pela tag à ser substituída, no caso: milesQnt invés de <tr>?

Agradeço desde já!

1
  • Acabei de ver que esqueci do seletor de query antes do nome da classe "$('tableRow[i] .preco-plano')... de qualquer forma não rodou, para na mesma parte do código... sei que eu usar a variável ai dentro está incorreto já =\
    – MSHijo
    Commented 3/01/2019 às 18:10

1 Resposta 1

3

É só fazer um .each pela classe .preco-plano e alterar o texto da classe .milesQnt que tem em comum a mesma linha tr:

$(document).ready(function(){

   $(".tabela .preco-plano").each(function(){

      var milesToWrite = $(this).text().split('$')[1];
      $(this).closest("tr").find(".milesQnt").text(milesToWrite);

   });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tabela resultados">
   <tr>
       <th>Preço</th>
       <th>Milhas</th>
   </tr>
   <tr>
       <td><p class="preco-plano">R$44</p></td>
       <td>
           <span><p class="milesQnt"></p></span>
           <span><input type="button" value="AVANÇAR"></span>
       </td>
   </tr>
   <tr>
       <td><p class="preco-plano">R$140</p></td>
       <td>
           <span><p class="milesQnt"></p></span>
           <span><input type="button" value="AVANÇAR"></span>
       </td>
   </tr>
   <tr>
       <td><p class="preco-plano">R$420</p></td>
       <td>
           <span><p class="milesQnt"></p></span>
           <span><input type="button" value="AVANÇAR"></span>
       </td>
   </tr>
</table>

Veja que foi preciso muito menos código do que o que você tentou. Também havia alguns erros no seu código, como por exemplo:

$('tableRow[i] preco-plano').split('$')[1];

Você tentou fazer split no elemento, e não no texto.

Outra coisa é que você está repetindo o evento ready:

Isso $(function(){ e isso $(document).ready(function(){ são a mesma coisa.

2
  • pode crer! eu teria que ter usado ".textContent" e ai sim poderia manipular o texto! Muito obrigado pela ajuda e pela dica no final tbm!
    – MSHijo
    Commented 3/01/2019 às 18:19
  • sim muito menos código! essa é a ideia do jQuery correto? fazer mais com menos... enfim, muito obrigado!
    – MSHijo
    Commented 3/01/2019 às 18:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .