CODEWITHSUNDEEP
javascriptjquery
umbriel
umbriel

Reputation: 751

JS Compute width of children element in parent

For some reason this trivial task has been giving me a proper headache.

So far I have 

<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

Which gives me the total sum of all the children under the .nowrap parent. But what I want is to have 2 separate values of each .nowrap childrens. So if I had 3 .nowrap divs I'd get something like 

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

What do?

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

Upvotes: 1

Views: 61

Answers (1)

Patrick Roberts
Patrick Roberts

Reputation: 51977

I realize this is labeled with jQuery, but just for propriety's sake I'll provide a solution that uses only standard functions:

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>

Upvotes: 1

Related Questions