每秒 div 动画以在 JQuery 中使用 for-each 循环增长到不同的大小

Question

我有一个 table 的 div 行，每个 table 行有两个 div 具有不同的背景颜色，例如。第一行有红色 div 和黄色 div，第二行也有红色 div 和黄色 div.

我每个循环都有一个jquery来循环来自控制器的数据，它被放入divs，然后将特定的动画分配给div循环，特别是确定 div 的宽度将像条形图一样增长的数据。

我遇到的问题是循环将特定动画应用于所有以前的 div，而不仅仅是我们正在循环的新 div。

用例：

一个 table 行包含两个 div。
加载 table 后，第一行的第二个（黄色）div 增长到 30%
在下一行中，第二个（黄色）div 增长到 70%

这是我正在使用的代码：

var dd = myDataArray;

$.each(dd, function (i, val) {

items = '<tr>' +
'<td width="10%">' + val.year + '</td>' +
'<td height="60">' +
'<div style="background:#ff6b01; width:0%;" class="container">' + val.minSize +
'</div>'
<br />
'<div style="background:#fcc899; width:0%;" class="container">' + val.maxSize + '</div>'
'</td>' +
'</tr>';

 $('tbody').append(items);

 $(document).ready(function () {

      $("tbody div:last-child").animate({ width: val.maxSize + '%' }, 9900);
 });

});

简而言之：是否可以以一种方式为第二个 div 设置动画，然后以另一种方式为新行中的第二个 div 设置动画。我试过使用 "tbody div:last-child last" 但它不起作用，而且可能无效。

任何煽动将不胜感激。

Answer 1

知道了：

var dd = myDataArray;

$.each(dd, function (i, val) {

 items = '<tr>' +
 '<td width="10%">' + val.year + '</td>' +
 '<td height="60">' +
 '<div style="background:#ff6b01; width:0%;" class="container">' + val.minSize +
 '</div>'
  <br />
  '<div style="background:#fcc899; width:0%;" class="container">' + val.maxSize + '</div>'
  '</td>' +
  '</tr>';

  $('tbody').append(items);

  $("tbody div:last").animate({ width: val.maxSize + '%' }, 9900);

});

不要让第二个 div 动画在页面加载时发生，并使用 last 而不是 last-child。

每秒 div 动画以在 JQuery 中使用 for-each 循环增长到不同的大小

Animate every second div to grow to a different size with a for-each loop in JQuery

jquery

jquery-animate