Jquery 已设置动画的progressbar列表计数器现在仅计数最后一个值

我现在正在做我自己的在线简历。我想为技能部分设置几个动画进度条。我还集成了一个计数器来显示每个进度条的计数百分比的动画，它位于每个相应div class=“progress bar”上方的另一个div中

问题是，当我尝试为进度条上方div中的计数器设置text（）时，它会显示上一个进度条的“aria valuenow”属性中的计数值

$（“.progress bar”）。每个（函数（i）{
$（此）。设置动画({
宽度：$（this.attr（'aria-valuenow'）+'%
});
$（this.prop（'Counter'，0）。设置动画({
计数器：$（this.attr（'aria-valuenow'））
}, {
时长：3000，
步骤：功能（现在）{
$（“.progressbar number”）.text（Math.ceil（现在））；
}
});
});
.pt-4{
填充顶部：1.5rem！重要；
}
.进展和要素{
显示器：flex；
对齐项目：居中；
证明内容：中心；
柔性包装：包装；
}
.progress_elements>div{
弹性：0.100%；
最大宽度：100%；
填充底部：1 em！重要；
}
.标题包装{
显示：-webkit flex；
证明内容：之间的空间；
-webkit证明内容：之间的空间；
}
.progressbar标题{
颜色：#000；
字号：1rem；
}
.进度条标题p{
边缘底部：6px；
字母间距：0.03em；
}
.进步与价值{
位置：相对位置；
颜色：#000；
字号：1rem；
}
.进度条编号{
显示：内联块；
}
.进展{
宽度：100%；
高度：5px；
边界半径：0；
}
.进度条{
高度：5px；
背景色：#2ecc71；
-webkit过渡：宽度5s；
-moz过渡：宽度5s；
-o型过渡：宽5s；
过渡：宽度5s；
}


PHP和MYSQL

%

HTML5和CSS3

%

WORDPRESS

%
一种解决方案是将一个公共类添加到持有进度条的主
div
（在下一个示例中，它被称为
进度包装器
）。现在，在此之后，您需要使用下一个代码来更新
%text
值：

step: function(now)
{
  $(this).closest(".progress-wrapper")
      .find(".progressbar-number")
      .text(Math.ceil(now));
}

前面的代码为每个进度条找到了包装器，然后使用
find（）
获取相关的
.progressbar编号
div进行更新。代码的不同之处在于下一个逻辑：

$(".progressbar-number").text(Math.ceil(now));

正在使用class
.progressbar编号更新所有
div
的
文本

更新示例：

$（“.progress bar”）。每个（函数（i）
{
$（此）。设置动画({
宽度：$（this.attr（'aria-valuenow'）+'%
});
$（this.prop（'Counter'，0）。设置动画({
计数器：$（this.attr（'aria-valuenow'））
}, {
时长：3000，
步骤：功能（现在）
{
$（this）.closest（“.progress wrapper”）
.find（“.progressbar编号”）
.text（Math.ceil（现在））；
}
});
});
.pt-4{
填充顶部：1.5rem！重要；
}
.进展和要素{
显示器：flex；
对齐项目：居中；
证明内容：中心；
柔性包装：包装；
}
.progress_elements>div{
弹性：0.100%；
最大宽度：100%；
填充底部：1 em！重要；
}
.标题包装{
显示：-webkit flex；
证明内容：之间的空间；
-webkit证明内容：之间的空间；
}
.progressbar标题{
颜色：#000；
字号：1rem；
}
.进度条标题p{
边缘底部：6px；
字母间距：0.03em；
}
.进步与价值{
位置：相对位置；
颜色：#000；
字号：1rem；
}
.进度条编号{
显示：内联块；
}
.进展{
宽度：100%；
高度：5px；
边界半径：0；
}
.进度条{
高度：5px；
背景色：#2ecc71；
-webkit过渡：宽度5s；
-moz过渡：宽度5s；
-o型过渡：宽5s；
过渡：宽度5s；
}


PHP和MYSQL

%

HTML5和CSS3

%

WORDPRESS

%
您的问题是什么？代码的预期结果是什么？请添加细节。很抱歉@Jane，我忘了指定想要的解决方案，我想在每个进度条上显示动画计数器。谢谢@Shidersz提供解决方案。所以基本上我只是忘了在脚本中提到父div，对吗？基本上，在更新值时，您忘了获取每个进度条的相对
.progressbar编号。因此，我所做的是首先找到每个进度条的相对包装，然后在包装内找到相对的
。进度条编号
。再次感谢@Shidersz！非常感谢