jQuery to loop through dynamically created elements with the same class

Question

I have no. of div which is created dynamically in button click.

<table>
   <tbody id="ProductDetail"></tbody>
</table>

In button click, some no. of div are created with Amount value.

funtion createDiv(){
  $("#ProductDetail").append("<tr><td ><div class='Amount'>"+Amount+"</div></td></tr>");
}

I want to loop through these dynamically created div to get Amount values in jquery.I tried below code. But its not iterating loop.

function calculateAmount(){
    $('.Amount').each(function (i, obj) {
         TotalAmountValue=TotalAmountValue+$(this).html();
    });
}

Please anybody help me.

can you include the js that you have tried so far?you can iterate through the div using class but i am not sure how you do it now — guradio, Jan 20 '16 at 09:02
Possible duplicate of [jQuery to loop through elements with the same class](http://stackoverflow.com/questions/4735342/jquery-to-loop-through-elements-with-the-same-class) — Anwar, Jan 20 '16 at 09:08

Simply Me · Accepted Answer · 2016-01-20T09:36:13.370

5

I got this working just fine!

$(document).ready(function(){
          $("#ProductDetail").append("<tr><td><div class='Amount'>3</div></td></tr>");
          $("#ProductDetail").append("<tr><td><div class='Amount'>3</div></td></tr>");
          $("#ProductDetail").append("<tr><td><div class='Amount'>3</div></td></tr>");

          $("#sum").click(function()
          {
              var sum = 0;
              $(".Amount").each(function()
              {
                  sum += parseInt($(this).text());
              });
              alert(sum);
          });
      });

the .each iterates through all your elements that have the class Amount. Use the . selector for class and add the name. Index represents the position, while the val is the current element.

Edit: get a local variable and set it to 0. After that, iterate through all the elements with that class and take their text. Since it is String, js will try to convert the sum variable to String. You need to parse the text to int. This is a working example.

Here is the HTML

  <table>
      <tbody id="ProductDetail"></tbody>
  </table>
  <input type="button" id="sum" value="Sum">

edited Jan 20 '16 at 09:36

answered Jan 20 '16 at 09:11

Simply Me

1,579
11
23

I tried these. But its not working.. these div is dynamically created – sajbeer Jan 20 '16 at 09:16
@sajbeer, what is the AmountValue doing in your function? – Simply Me Jan 20 '16 at 09:18
calculate the total amount value.. but its not getting in to function. – sajbeer Jan 20 '16 at 09:21
@sajbeer, you have the `$(document).ready` at the begining of the script? – Simply Me Jan 20 '16 at 09:24
@sajbeer, check it now. This should work, tried it on my own. – Simply Me Jan 20 '16 at 09:38
but in my case function calculateAmount() is outside the $(document).ready – sajbeer Jan 20 '16 at 09:39
@sajbeer, when is your function `calculateAmount called? – Simply Me Jan 20 '16 at 09:58

palawer · Answer 2 · 2016-01-22T07:51:49.910

2

Try using text()

$('.Amount').each(function (i, obj) {
  TotalAmountValue += parseInt($(this).text());
});

edited Jan 22 '16 at 07:51

answered Jan 20 '16 at 09:22

palawer

125
1
9

score 1 · Answer 3 · answered Jan 20 '16 at 09:13

1

 $('.Amount').each(function(index, val)
    {
        //do something
    });

answered Jan 20 '16 at 09:13

Jobelle

2,717
1
15
26

score 0 · Answer 4 · answered Nov 09 '21 at 21:21

If you are calling the calculateAmount() function right after createDiv() depending on your page weight, it might happen that the DIV you create on the fly it's not written to the DOM yet and your each function inside calculateAmount() it's not triggered. I recommend adding a JS delay to give the browser the time to append the divs to the DOM. For the user, it will make no difference.

HTML

<table>
   <tbody id="ProductDetail"></tbody>
</table>

JS

function createDiv(){
  $("#ProductDetail").append("<tr><td ><div class='Amount'>"+Amount+"</div></td></tr>");
}

function calculateAmount(){
    $('.Amount').each(function (i, obj) {
         TotalAmountValue += parseInt($(this).text());
    });
}

createDiv();

setTimeout(function () {
    calculateAmount();
}, 400);

jQuery to loop through dynamically created elements with the same class

4 Answers4