Анимируйте каждый второй элемент div для увеличения его размера с помощью цикла for-each в JQuery. - PullRequest
Новая
       7

Анимируйте каждый второй элемент div для увеличения его размера с помощью цикла for-each в JQuery.

0 голосов
/ 03 июня 2018

У меня есть таблица 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);
 });

});

Вкратце: возможно ли анимировать второй div одним способом, а затем другим способом анимировать второй div в новых строках или другим способом.Я пытался использовать "tbody div:last-child last", но он не работает и, возможно, недействителен.

Любое подстрекательство приветствуется.

1 Ответ

0 голосов
/ 03 июня 2018

Понял: 

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.

...