基于类名的动态计算

时间:2015-05-21 07:52:57

标签: javascript jquery

<div class="section">
<div class="section1">
    <input class="a gg1 k" type="number" name="q11" value="1" />
    <input class="a hh1 k" type="number" name="q12" value="1" />
    <input class="a kk1 k" type="number" name="q13" value="0" />
</div>
<div class="section2">
    <input class="a gg2" type="number" name="q21" value="2" />
    <input class="a hh2 k" type="number" name="q22" value="1" />
    <input class="a kk2 k" type="number" name="q23" value="0" />
</div>
<div class="section3">
    <input class="a gg3 k" type="number" name="q31" value="2" />
    <input class="a hh3 k" type="number" name="q32" value="3" />
    <input class="a kk3 k" type="number" name="q33" value="0" />
</div>
<div class="section4">
    <input class="a gg4 k" type="number" name="q41" value="2" />
    <input class="a hh5 k" type="number" name="q42" value="4" />
    <input class="a kk5 k" type="number" name="q43" value="0" />
</div>
</div>

让我说我有上面的HTML。如何让kk *值为gg * / hh *? (例如,kk1 = gg1 / hh1)。 html是动态的,所以我需要一个generalize单个jquery函数来为每个需要的计算进行计算...

3 个答案:

答案 0 :(得分:1)

'[class*=gg]'将在任何地方搜索包含gg的类的元素。

$('.section').children().each(function() {
    var val = parseInt($(this).find('[class*=gg]').val(), 10) / parseInt($(this).find('[class*=hh]').val(), 10);

    $(this).find('[class*=kk]').val(val);
});

演示:https://jsfiddle.net/tusharj/kya65sfa/

答案 1 :(得分:0)

像这样 - 如果你在DIV上使用ID并为每个输入字段添加了ID会更安全

&#13;
&#13;
$(function() {
  $(".section>div").each(function() {
    var idx = this.className.replace("section","");
    var kk = ($(".gg"+idx).val()/$(".hh"+idx).val()).toFixed(2);
    $(".kk"+idx).val(kk);
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="section">
<div class="section1">
    <input class="a gg1 k" type="number" name="q11" value="1" />
    <input class="a hh1 k" type="number" name="q12" value="1" />
    <input class="a kk1 k" type="number" name="q13" value="0" />
</div>
<div class="section2">
    <input class="a gg2" type="number" name="q21" value="2" />
    <input class="a hh2 k" type="number" name="q22" value="1" />
    <input class="a kk2 k" type="number" name="q23" value="0" />
</div>
<div class="section3">
    <input class="a gg3 k" type="number" name="q31" value="2" />
    <input class="a hh3 k" type="number" name="q32" value="3" />
    <input class="a kk3 k" type="number" name="q33" value="0" />
</div>
<div class="section4">
    <input class="a gg4 k" type="number" name="q41" value="2" />
    <input class="a hh5 k" type="number" name="q42" value="4" />
    <input class="a kk5 k" type="number" name="q43" value="0" />
</div>
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

$('.section div').each(function () {
    var gg = $(this).find('[class*=gg]').val(),
        hh = $(this).find('[class*=hh]').val(),
        kk = ~~gg / ~~hh;
    $(this).find('[class*=kk]').val(kk)
});

这从每个div节获得值gg *和hh *,并将结果放在kk *中。