使用jQuery循环遍历具有相同类的动态创建元素

Question

我有很多个div，这些div是在按钮点击时动态创建的。

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

在按钮点击事件中，会创建一些带有金额值的 div。

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

我希望能够通过JQuery循环遍历这些动态创建的div并获取它们的金额值。我尝试了下面的代码，但是它没有进行循环迭代。

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

Please anybody help me.

- sajbeer

---

你能把你已经尝试过的JS代码包含进来吗？你可以通过class迭代div，但我不确定你现在是怎么做的。 - guradio

可能是重复的问题：使用jQuery循环遍历具有相同类的元素 - Anwar

Answer 1

我已经顺利地将其解决了！

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

.each遍历所有具有Amount类的元素。使用.选择器选择类并添加名称。索引表示位置，而val是当前元素。

编辑：获取一个本地变量并将其设置为0。然后，遍历该类的所有元素并获取它们的文本。由于它是String，js将尝试将sum变量转换为String。您需要将文本解析为int。这是一个可行的示例。

以下是HTML：

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

- Simply Me

---

@sajbeer，你的函数中AmountValue是做什么用的？ - Simply Me

计算总金额值，但它无法进入函数。 - sajbeer

@sajbeer，你的脚本开头是否有$(document).ready？ - Simply Me

@sajbeer，请现在检查一下。这应该有效，我自己试过了。 - Simply Me

@sajbeer，你的calculateAmount函数是什么时候被调用的？ - Simply Me

Answer 2

尝试使用text()函数。

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

- palawer

Answer 3

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

- Jobelle

Answer 4

如果您在调用 createDiv() 后立即调用 calculateAmount() 函数，取决于您的页面权重，可能会发生您动态创建的 DIV 尚未写入 DOM，而您在 calculateAmount() 中的 each 函数未被触发的情况。我建议 添加JS延迟，以便浏览器有时间将 div 添加到 DOM 中。对于用户来说，这没有任何区别。

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

- Adrian P.