CODEWITHSUNDEEP
javascriptjquery
user3663854
user3663854

Reputation: 463

Dynamic calculation based on class name

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

lets say I have above html. How to I get kk* value to be gg*/hh*? (eg. kk1 = gg1/hh1). The html is dynamic so I need a generalize single jquery function to do this calculation for each calculation needed...

Upvotes: 0

Views: 142

Answers (3)

Thalsan
Thalsan

Reputation: 5690

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

This gets the value gg* and hh* from each section div and places the result in kk*.

Upvotes: 0

mplungjan
mplungjan

Reputation: 177975

Like this - It would be much safer if you used IDs on the DIVs and added an ID to each of the input fields

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

Upvotes: 0

Tushar
Tushar

Reputation: 87203

'[class*=gg]' will search for the elements having class that contains gg anywhere.

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

Demo: https://jsfiddle.net/tusharj/kya65sfa/

Upvotes: 1

Related Questions