Javascript: get height of child and use that to set height of parent.

[Antechinus]

This is impossible to find on the web, so...

if I have this markup:

Code Select Expand

<div class="parent">
<div class="child">
</div>
</div>
<div class="parent">
<div class="child">
</div>
</div>
<div class="parent">
<div class="child">
</div>
</div>In other words, multiple instances of a parent class and child class, with no ID's available (so do not even think about suggesting getting elements by ID)...

...and I need to get the currently undefined height of each child element, and use that to set the height of its parent only.

IOW, getting the height of one child and then forcing that on all parents is not what is wanted. I need to correctly assign the height of each parent to match its own child, and I need to do that with one nice little script that will handle them all.

Go for it.

[Kindred]

https://www.javascripttutorial.net/javascript-dom/javascript-width-height/

[Antechinus]

Read what I wrote, then read that article. Spot the difference.
I found umpteen articles like that before I started this topic.

[Antechinus]

Aha! Got the bastard. This works:

Code Select Expand

<script>
var childHeight = 0;
$(".child").each(function() {
var childHeight = ($(this).height());
$(this).closest(".parent").height(childHeight);
childHeight = 0;
})
</script>