javascript - jQuery to loop through dynamically created elements with the same class - Stack Overflow

admin管理员组

文章数量:1344238

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.

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.

• javascript
• jquery
• html

Share Improve this question Follow edited Jan 20, 2016 at 9:37 sajbeer asked Jan 20, 2016 at 8:59 sajbeersajbeer 21122 gold badges33 silver badges1111 bronze badges 2

• 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 Commented Jan 20, 2016 at 9:02
• Possible duplicate of jQuery to loop through elements with the same class – Anwar Commented Jan 20, 2016 at 9:08

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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">

Try using text()

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

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

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 remend 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);

本文标签： javascriptjQuery to loop through dynamically created elements with the same classStack Overflow