我在jquery上的循环代码;不要在循环中使用

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

本文关键字：循环 jquery 代码 我在      更新时间：2024-02-05

我有这样的代码。

<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?> ">

这里的jquery代码

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

它可以正常工作，但只适用于1行输入表单

如果我像一样循环到我的jquery代码

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

并将jquery选择器更改为$('.inp'+x)，仅第5行可以工作，但第1行到第4行不能工作。有人能帮我吗？感谢

试试这样的东西：

$('[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));
});

您可以按属性对元素进行分组，并使用它来选择等元素

$('.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 />

另一种方式

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

您只有一个输入类为"inp0"。为所有输入和选择器中使用一个公共类。

相关文章：