Question

我有一个div表，每个表行有两个div，背景颜色不同，例如。第一行有一个红色div和一个黄色div，第二行还有一个红色div和一个黄色div。

我有一个jquery为每个循环循环来自控制器的数据，它被放入div中，然后为循环中的div指定一个特定的动画，特别是确定div在宽度上增长的数据的数据条形图。

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

用例：

表格行包含两个div。
加载表格后，第一行的第二个（黄色）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);
 });

});

简而言之：是否可以以td方式为第二个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。

使用JQuery中的for-each循环将每个第二个div设置为不同大小的动画

1 个答案: