Javascript JS计算父元素中子元素的宽度

不知什么原因，这项琐碎的工作一直让我头疼不已

到目前为止我有

<div class="nowrap">
  <span>Content</span>
  <span>Content</span>
  <span>Content</span>
</div>

<div class="nowrap">
  <span>Content</span>
  <span>Content</span>
</div>

这给了我.nowrap父项下所有子项的总和。但我想要的是每个.nowrap有两个独立的值 孩子们。所以如果我有3个nowrap div我会得到

[443 totalWidth of .nowrap, 755 totalWidth of .nowrap, 457 totalWidth of .nowrap]

你怎么办

---

我意识到这是用jQuery标记的，但为了恰当起见，我将提供一个只使用标准函数的解决方案：

让totalWidths=Array.from(
document.querySelectorAll（'.nowrap'），
nowrap=>Array.from(
不，孩子们，
child=>child.offsetWidth
).减少（（总宽度）=>总宽度+宽度）
)
console.log（总宽度）

div→ [2035] — 
时髦人物
6'2“•180°m²
病态韧带
射频rt

因此，对于每个nowrap，您希望总结其子跨度的宽度。是的，这就是目标！因此，请编写该目标。您知道如何执行each，现在只需将宽度移动到该each内，并对子跨度执行该逻辑。

$（this）。children（）

将为您提供每个节点的跨距。@A.Wolff这很接近，但控制台中的值似乎没有反映每个子节点的值。例如，第一个nowrap有3个子节点，分别为106px、92px和90px，总共应该给我288px。@SebastianGraz我不明白您的意思。现在看来您是什么意思king for：？感谢您的参与。我非常感谢非JQuery的回答。哦，感谢您的接受。我是否应该编辑以包括JQuery，因为这是您要求的？不，那很好。我的大多数代码目前都是香草JS，所以实际上更好。旁注；尽管我对JS的了解有限，但我可以告诉您这段代码片段她很漂亮

[443 totalWidth of .nowrap, 755 totalWidth of .nowrap, 457 totalWidth of .nowrap]