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

【问题标题】：jQuery to loop through dynamically created elements with the same classjQuery循环遍历具有相同类的动态创建的元素
【发布时间】：2016-04-26 00:46:30
【问题描述】：

我没有。在按钮单击中动态创建的 div。

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

在按钮点击中，有些没有。的 div 是使用 Amount 值创建的。

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

我想遍历这些动态创建的 div 以获取 jquery 中的金额值。我尝试了下面的代码。但它不是迭代循环。

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

请任何人帮助我。

【问题讨论】：

你能把你到目前为止尝试过的js包括进来吗？你可以使用类遍历div，但我不知道你现在是怎么做的
jQuery to loop through elements with the same class的可能重复

标签： javascript jquery html

【解决方案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 类的元素。为类使用. 选择器并添加名称。 index代表位置，val代表当前元素。

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

这里是 HTML

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

【讨论】：

我试过这些。但它不起作用..这些 div 是动态创建的
@sajbeer，AmountValue 在你的函数中做了什么？
计算总金额值..但它没有进入功能。
@sajbeer，你在脚本开头有$(document).ready？
@sajbeer，现在检查一下。这应该可以，我自己尝试过。

【解决方案2】：

尝试使用text()

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

如果您根据页面权重在 createDiv() 之后立即调用 calculateAmount() 函数，则可能会发生您动态创建的 DIV 不是写入 DOM 并且您的 each 函数在 calculateAmount() 内没有被触发。我推荐adding a JS delay 让浏览器有时间将div 附加到DOM。对用户来说，没有任何区别。

HTML

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

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

【讨论】：