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

Question

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

Navigation

#1 by (3 votes)

1

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

Within a table, we have price information in the tag: <p class="preco-plano">R$44</p> and I created a blank tag: <p class="milesQnt"></p> for the number of miles in the case. The amount of miles is from 1 to 1, that is, 1 is a real equivalent to one mile, so in% with% where the value is 420 reais, the amount of miles should be 420 reais.

See 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 of repetition that must pass through all the <tr> of the table and change the value of the blank miles tag by the number that is in the price tag ... however when trying to access the price of the plane within of tableRow [i] (which is the tr that the loop is currently in) of the error. I understand that my semantics is wrong, but when trying to access the "pre-plan" without setting the position of the loop, it changes only the first tag and not the others.

I need suggestions!

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

Should I use tableRow[i].x instead of forEach for loop?

My logic is wrong, should loop through the tag to be replaced, in this case: for instead of milesQnt ?

Thank you in advance!

javascript jquery loop

asked by anonymous 03.01.2019 / 19:04

1 answer

Get Radio Button value in Foreach- JS Get cookies / web browser

score 3 · Accepted Answer

Just do a .each for class .preco-plano and change the text of class .milesQnt that has 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><tableclass="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>

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

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

You tried to split the element, not the text.

Another thing is that you are repeating the event ready :

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