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

Question

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

Just use a common class to all the input fields, no need to have separate classes — Arun P Johny
– Arun P Johny, Commented Apr 7, 2016 at 4:50
@ArunPJohny i have many sets, not just inp, but inp1, inp1, inp1, sum1 inp2, inp2, inp2, sum2 if i do it manualy it work, but if i do it by loop it doens't work — bigbee
– bigbee, Commented Apr 7, 2016 at 5:01

madalinivascu · Accepted Answer · 2016-04-07 05:01:29Z

1

Try something like this:

$('[class^="inp"]').keyup(function(){       
var sum = 0;
var ave = 0;
var index = $(this).attr('class').split('p')[1];
$('.inp'+index).each(function(){
    sum += $(this).val();
});
 ave  = sum/3;

$('.sum'+index).val(ave.toFixed(2));
});

answered Apr 7, 2016 at 5:01

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arun P Johny · Accepted Answer · 2016-04-07 05:17:02Z

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>

Pavel Gatnar · Accepted Answer · 2016-04-07 05:03:26Z

0

You have just 1 input classed 'inp0'. Use a common class for all inputs and in the selector.

answered Apr 7, 2016 at 5:03

Pavel Gatnar

4,0532 gold badges22 silver badges29 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related