Question

出于某种原因，这个微不足道的任务给了我一个适当的头痛。

到目前为止我已经

了

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

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

-

var width = 0;
$('.nowrap').each(function() {
    width += $(this).outerWidth( true );
});
console.log(width) //1946

这给了我.nowrap父级下所有孩子的总总和。但我想要的是每个.nowrap有2个单独的值儿童。所以，如果我有3个.nowrap div，我会得到像

这样的东西

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

做什么？

https://codepen.io/umbriel/pen/JOOxeL

Answer 1

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

let totalWidths = Array.from(
  document.querySelectorAll('.nowrap'),
  nowrap => Array.from(
    nowrap.children,
    child => child.offsetWidth
  ).reduce((total, width) => total + width)
)

console.log(totalWidths)

<div class="nowrap">
  <span>div→ [2035] — </span>
  <span> Funky figures </span>
  <span>6'2" • 180° m² </span>
</div>

<div class="nowrap">
  <span> Sick ligatures </span>
  <span class="dlig">rf rt</span>
</div>

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

1 个答案: