My loop code on jquery doesn't work with .each inside the loop

I have code like this.

<input  type="text" name="1" class = "inp<?=$p?> ">
<input  type="text" name="2" class = "inp<?=$p?> ">
<input  type="text" name="3" class = "inp<?=$p?> ">
<input  type="text" name="4" class = "sum<?=$p?> ">

Here the jquery code

$('.inp0').keyup(function(){       
var sum = 0;
var ave = 0;
$('.inp0').each(function(){
    sum += +$(this).val();
});
 ave  = sum/3;
$('.sum0').val(ave.toFixed(2));
});

and it work properly but just for 1 row of input form.

if i do loop to my jquery code like

for(x=0;x<5;x++)
{*jquery code here*}

and change jquery selector to $('.inp'+x), only 5th row that can work but not for row 1 to 4. can someone help me ? thanks before

Answers 1

  • You can group the elemnets by attributes and use that to select the elements like

    $('.inp').keyup(function() {
      var sum = 0;
      var ave = 0;
      var grp = $(this).data('grp');
      $('.inp[data-grp="' + grp + '"]').each(function() {
        sum += +$(this).val() || 0;
      });
      ave = sum / 3;
      $('.sum[data-grp="' + grp + '"]').val(ave.toFixed(2));
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input type="text" name="1" data-grp="0" class="inp">
    <input type="text" name="2" data-grp="0" class="inp">
    <input type="text" name="3" data-grp="0" class="inp">
    <input type="text" name="4" data-grp="0" class="sum">
    <br />
    <input type="text" name="1" data-grp="1" class="inp">
    <input type="text" name="2" data-grp="1" class="inp">
    <input type="text" name="3" data-grp="1" class="inp">
    <input type="text" name="4" data-grp="1" class="sum">
    <br />
    <input type="text" name="1" data-grp="2" class="inp">
    <input type="text" name="2" data-grp="2" class="inp">
    <input type="text" name="3" data-grp="2" class="inp">
    <input type="text" name="4" data-grp="2" class="sum">
    <br />


    Another way

    $('.inp').keyup(function() {
      var sum = 0;
      var ave = 0;
      var $tr = $(this).closest('tr');
      $tr.find('.inp').each(function() {
        sum += +$(this).val() || 0;
      });
      ave = sum / 3;
      $tr.find('.sum').val(ave.toFixed(2));
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table>
      <tr>
        <td>
          <input type="text" name="1" class="inp">
        </td>
        <td>
          <input type="text" name="2" class="inp">
        </td>
        <td>
          <input type="text" name="3" class="inp">
        </td>
        <td>
          <input type="text" name="4" class="sum">
        </td>
      </tr>
      <tr>
        <td>
          <input type="text" name="1" class="inp">
        </td>
        <td>
          <input type="text" name="2" class="inp">
        </td>
        <td>
          <input type="text" name="3" class="inp">
        </td>
        <td>
          <input type="text" name="4" class="sum">
        </td>
      </tr>
      <tr>
        <td>
          <input type="text" name="1" class="inp">
        </td>
        <td>
          <input type="text" name="2" class="inp">
        </td>
        <td>
          <input type="text" name="3" class="inp">
        </td>
        <td>
          <input type="text" name="4" class="sum">
        </td>
      </tr>
    </table>


Related Articles