Здравствуйте! Не могу разобраться, в чем причина, опыта нет, провозился весь день уже. Есть следующая структура опроса (кол-во вариантов может быть разным):
<div class="vote-res">
<div class="poll-row">
<strong>Ламинат4</strong>
<span class="pull-right">43%</span>
<div class="progress">
<div id="bar4" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="43" aria-valuemin="0" aria-valuemax="100" style="width: 43%"></div>
</div>
</div>
<div class="poll-row">
<strong>Ламинат2</strong>
<span class="pull-right">21%</span>
<div class="progress">
<div id="bar2" class="progress-bar" role="progressbar" aria-valuenow="21" aria-valuemin="0" aria-valuemax="100" style="width: 21%"></div>
</div>
</div>
<div class="poll-row">
<strong>Ламинат3</strong>
<span class="pull-right">21%</span>
<div class="progress">
<div id="bar3" class="progress-bar" role="progressbar" aria-valuenow="21" aria-valuemin="0" aria-valuemax="100" style="width: 21%"></div>
</div>
</div>
<div class="poll-row">
<strong>Ламинат</strong>
<span class="pull-right">14%</span>
<div class="progress">
<div id="bar1" class="progress-bar" role="progressbar" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100" style="width: 14%"></div>
</div>
</div>
<p>Всего голосов: 14</p>
</div>
Jquery функция должна выполнять анимацию полоски (процент проголосовавших) при загрузке страницы. Процент берется из этого же кода в переменную percentage и потом блоку должна задаваться такая ширина. Однако у меня анимация работает только для первого элемента.
function animateResults(){
$(".poll-row").each(function(){
var percentage = $(this).children("span").text();
console.log(percentage);
$(this).children(".progress").children("div").css({width: "0%"}).animate({width: percentage}, 'slow');
});
}
Помогите найти, пожалуйста, в чем может быть проблема?
