Javascript如何访问类中的类

我不太清楚该怎么问这个问题。我知道在某个地方有一个答案，但我一辈子都想不出/记住我试图实现的目标的术语

我有用HTML编写的个人资料卡，都有类名“card”。每张卡片内有两个数字。我希望能够显示一个进度条，特定于每张卡中数字的百分比关系

所以，我的代码是：

<div class="card">
<p class="nameTitle">NAME 1</p>
<p class="cardTarget">20</p>
<p class="cardCurrent">10</p>
<div class="progBar"></div>
</div>

<div class="card">
<p class="nameTitle">NAME 2</p>
<p class="cardTarget">20</p>
<p class="cardCurrent">5</p>
<div class="progBar"></div>
</div>

名称1

20
10
名称2

20
5

我希望Javascript能够访问

cardTarget

和

cardCurrent

的

nametTitle:NAME 1

，然后向相同

卡的
progBar
输出一个百分比，并对
nametTitle:NAME 2
执行相同的操作

因此
nametTitle:NAME1的
progBar
将等于50%，而
nametTitle:name2的
progBar
将等于25%

我知道如何访问元素，我知道如何进行计算以转换为百分比，我不知道的是如何（本质上）将元素绑定到
卡
，而不影响其他
卡
，因为它们都被分配了相同的类名

我希望这是有意义的，并提前感谢您的帮助。
我想您可能正在寻找，它可以让您在另一个元素中找到一个元素。（还需要查找列表。）

例如，要更新这些卡片：

document.querySelectorAll(".card").forEach(card => {
    const cardTarget = card.querySelector(".cardTarget");
    const cardCurrent = card.querySelector(".cardCurrent");
    const progBar = card.querySelector(".progBar");
    const percent = (cardCurrent.textContent / cardTarget.textContent) * 100; // Or whatever
    progBar.setSomethingToReflectThatPercentage();
});

实例：


setTimeout（（）=>{
document.queryselectoral（“.card”）.forEach（card=>{
const cardTarget=card.querySelector（“.cardTarget”）；
const cardCurrent=card.querySelector（“.cardCurrent”）；
const progBar=card.querySelector（“.progBar”）；
常量百分比=（cardCurrent.textContent/cardTarget.textContent）*100；//或其他
progBar.innerHTML=百分比；
});
}, 500);

名称1

20
10
--
名称2

20
5
--
也许这样的事情可以让你开始。注意偏移有点随意，我相信您有自己的样式：


for（document.getElementsByClassName（“卡”）的常数）{
const target=+（e.querySelector（“.cardTarget”）.innerText）；
const current=+（e.querySelector（“.cardCurrent”）.innerText）；
常数条=e.querySelector（“.progBar”）；
bar.style.width=当前/目标*300+“px”；
bar.innerText=当前*5/（目标*5）*100+“%”；
}
.progBar{
高度：20px；
背景：#000；
颜色：#fff；
}

名称1

20
10
名称1

20
5
我恐怕不清楚你在问什么（尤其是因为你有两个
NAME 1
s和没有
NAME 2
）。您能在尝试访问元素的位置添加代码吗？您是否尝试为它们分配唯一的ID？然后使用
document.getElementById（）
，您就可以访问所需的确切元素了。@joseatchang-当您使用DOM结构时，不需要使用唯一的ID。@T.J.Crowder是的，对这一混乱表示歉意。我已编辑以更正它。但是你下面的答案解决了问题谢谢你是的！这完全解决了问题谢谢你。forEach是我一直在寻找的。只是一个旁注：虽然一些实现可能会将
GetElementsByCassName
iterable返回的
HTMLCollection
标记为iterable（当前的Chrome和Firefox都是这样），但不会将它们标记为iterable，也不是所有的实现都会添加它（例如Edge）。（这与from
queryselectoral
相反，后者被指定为iterable[现在]。
for of
仅适用于iterable对象。@T.J.Crowder很高兴知道，谢谢！传统的for循环或使用
forEach
的版本也可以使用。