我在 jquery 上的循環代碼不適用於循環內的 .each

Question

我有這樣的代碼。

<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 行。有人可以幫助我嗎？ 之前謝謝

Answer 1

嘗試這樣的事情：

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

Answer 2

您只有 1 個分類為“inp0”的輸入。 對所有輸入和選擇器使用通用類。

Answer 3

您可以按屬性對元素進行分組，並使用它來選擇元素，例如

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