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

Posted 2023-03-05

【中文标题】jQuery循环遍历具有相同类的动态创建的元素

【英文标题】：jQuery to loop through dynamically created elements with the same class

【发布时间】：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的可能重复

【参考方案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>

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