JQUERY：从具有相同类的div中获取不同的值

我拼凑了一些代码来构建一个动画百分比条。当一个页面上只有一个条时，一切都很顺利。我有以下代码

<div id="progress_bar" class="ui-progress-bar ui-container"> 
<div class="ui-progress" style="width: 60%;"> 
<span class="ui-label" style="display:none;"><b class="value"><span class="client_overall_progress">60</span>%</b></span> 
</div> 
</div>


$(function() {
var overall_progress = $(".client_overall_progress", this) .text();

// Hide the label at start
$('#progress_bar .ui-progress .ui-label').hide();
// Set initial value
$('#progress_bar .ui-progress').css('width', '7%');

// Simulate some progress
$('#progress_bar .ui-progress').animateProgress(overall_progress);
});

60% 
$（函数（）{
var totall_progress=$（“.client_totall_progress”，this）.text（）；
//在开始时隐藏标签
$（'#progress_bar.ui progress.ui label'）.hide（）；
//设定初始值
$（'#progress_bar.ui progress'）.css（'width'，'7%”）；
//模拟一些进展
$（'progress_bar.ui progress'）.animateProgress（总体进度）；
});

我希望能够在我的页面上放置多个百分比栏，但我不确定如何分离所有不同的值，并使每个栏呈现为正确的百分比

---

有人能帮我吗？

您正在使用id为

#progress\u bar

的进度条进行寻址。因为假定元素ID在DOM中是唯一的，所以当试图通过元素ID访问元素时，这将导致意外行为，就像您在jQuery选择器上所做的那样

您可以做的是将

#progress_bar

更改为

.progress_bar

，而不是使用

progress_bar

的id定义它，将它作为另一个类添加到该顶分区

（编辑成对其评论的答案，以供将来参考）

您正在调用整套

.client\u overall\u progress

。解决方案是迭代每个

.progress\u bar.ui progress

，并分别设置每个元素的动画。我已经设置了一个jsfiddle来向您展示这个问题以及如何解决它：jsfiddle.net/4xgzq/1

您只需查看jQuery代码，注释掉警报并取消注释

.animateProgress

---

顺便说一句，我还在

.each（）

之前放置了一个

警报（）

，向您展示您在脚本中使用的第一个

客户端的总体进度

选择器发生了什么-它捕获了整组选择器的文本。（这就是为什么第一个

alert（）

向您显示6060）

您正在使用id为

#progress\u bar

的进度条寻址。因为假定元素ID在DOM中是唯一的，所以当试图通过元素ID访问元素时，这将导致意外行为，就像您在jQuery选择器上所做的那样

您可以做的是将

#progress_bar

更改为

.progress_bar

，而不是使用

progress_bar

的id定义它，将它作为另一个类添加到该顶分区

（编辑成对其评论的答案，以供将来参考）

您正在调用整套

.client\u overall\u progress

。解决方案是迭代每个

.progress\u bar.ui progress

，并分别设置每个元素的动画。我已经设置了一个jsfiddle来向您展示这个问题以及如何解决它：jsfiddle.net/4xgzq/1

您只需查看jQuery代码，注释掉警报并取消注释

.animateProgress

---

顺便说一句，我还在

.each（）

之前放置了一个

警报（）

，向您展示您在脚本中使用的第一个

客户端的总体进度

选择器发生了什么-它捕获了整组选择器的文本。（这就是为什么第一个

alert（）

向您显示6060）

您好，谢谢您提供的信息。我自己也应该注意到这个小错误。正在发生的是。客户端的值。总体进度是将这些值集中在一起。所以，如果2小节是60%，我得到2小节是6060%，如果你知道我的意思，是的，我明白你的意思。这是因为您正在调用整个

.client\u overall\u progress

集合的

.animateProgress

。解决方案是迭代每个

.progress\u bar.ui progress

，并分别设置每个元素的动画。我已经设置了一个JSFIDLE来向您展示这个问题以及如何解决它：您只需查看jQuery代码并注释掉警报，然后取消对

.animateProgress

的注释。顺便说一句，我还在

.each（）

之前放置了一个

警报（），为了向您展示您在脚本中使用的第一个
客户端\u总体进度
选择器发生了什么，它抓取了整套选择器的文本。（这就是为什么第一个
alert（）
向您展示6060）绝对精彩。我知道它必须迭代，但我不知道如何实现它。非常感谢您的快速回复。谢谢您提供的信息。我自己也应该注意到这个小错误。正在发生的是。客户端的值。总体进度是将这些值集中在一起。所以，如果2小节是60%，我得到2小节是6060%，如果你知道我的意思，是的，我明白你的意思。这是因为您正在调用整个
.client\u overall\u progress
集合的
.animateProgress
。解决方案是迭代每个
.progress\u bar.ui progress
，并分别设置每个元素的动画。我已经设置了一个JSFIDLE来向您展示这个问题以及如何解决它：您只需查看jQuery代码并注释掉警报，然后取消对
.animateProgress
的注释。顺便说一句，我还在
.each（）
之前放置了一个
警报（），为了向您展示您在脚本中使用的第一个
客户端\u总体进度
选择器发生了什么，它抓取了整套选择器的文本。（这就是为什么第一个
alert（）
向您展示6060）绝对精彩。我知道它必须迭代，但我不知道如何实现它。非常感谢您的快速回复