Question

我有这样的代码。

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
    String strtext = getArguments().getString("username");    
    return inflater.inflate(R.layout.fragment, container, false);
}

这里是jquery代码

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

并且它正常工作，但仅适用于1行输入表单。

如果我循环到我的jquery代码，如

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

并将jquery选择器更改为for(x=0;x<5;x++) {*jquery code here*}，只有第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个输入分类＆＃39; inp0＆＃39;。对所有输入和选择器使用公共类。

Answer 3

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

等元素

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

我在jquery上的循环代码不能在循环中使用.each

3 个答案: