jQuery / Select the item within an array, referring to the position of the loop

Question

Good afternoon friends, I’m having trouble finding a logical solution to solve my problem in a loop (for)

Inside a table, we have a price information on the tag: <p class="preco-plano">R$44</p> and created a blank tag:<p class="milesQnt"></p>for the amount of miles in the case. The amount of miles is 1 to 1, ie 1 real equals one mile, so in the <tr>where the value is 420 real, the number of miles must be 420 real.

Look at the code below:

 $(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>

I made a loop that must go through all the loops <tr> from the table and change the value of the blank miles tag by the number in the price tag... but when trying to access the plan price within the tableRow[i] (which is the tr the loop is at the time) of the error. i understand that my semantics is wrong, but when trying to access the "flat-price" without defining the position of the loop, it changes only the first tag and not the others.

I need suggestions!

i could first call the variable and then use jquery to select the price query? for example create a variable: let x = $('.preco-plano') and then call this way inside the loop tableRow[i].x ?

I should use the forEach instead of for for the loop?

my logic is wrong, should make the loop straight by the tag to be replaced, in case: milesQnt rather than <tr>?

Thank you in advance!

Answer 1

Just make a .each by class .preco-plano and change the class text .milesQnt that have in common the same line 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>

Note that it took a lot less code than you tried. There were also some errors in your code, for example:

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

You tried to split the element, not the text.

Another thing is you’re repeating the event ready:

That $(function(){ and this $(document).ready(function(){ are the same thing.