jQuery find the height of children and apply to parent

Question

I have several child elements that will have different heights and have the capability of changing heights after page load, as the contents inside them will be dynamic, some of them will take up 50% of the parents width and some will take up 100% of the parents width. What I need is to find the height of all the child elements when they are laid out correctly and apply it to the parent element and for the height to be reapplied if there is any change on the child elements. The reason I need to apply the height to the parent element is to make another piece of jQuery to work.

I've created a small example http://cdpn.io/hrbjw and an example showing the code http://codepen.io/julianvk/pen/hrbjw

If this isn't clear enough just comment on what part is confusing.

Shouldn't matter. He asked how to find it with jQuery. Apply jQuery with css selectors to find height of child. Apply the height to the height of the parent. — , May 08 '14 at 03:48
sorry yes they are floating and I need to find it in jquery to apply it to the parent. — JVK, May 08 '14 at 03:56

score 1 · Accepted Answer · edited May 23 '17 at 10:26

1

I'm not sure I got it right, but..

If your children heights can change dynamically and you can't track when it happens, you probably need to create a listener to check if their heights changed. Unfortunately there is no DOM event for that, but you can refer to the solutions of this question Detecting when a div's height changes using jQuery.

Once you have some callback function being called whenever the heights change, you just gotta iterate over your children, get their heights and make your desired changes.

Edit:

As you know what are the triggers, you could use something like

function change_parent_height(){
  $(".child").each(function() {
    child_height = $(this).height();
  }
  //do something with the children heights
  //in this example, parent is gonna get the last child height
  $(".parent").height(child_height);
}

$(document).resize(change_parent_height);
$(".child").on("hover click", change_parent_height);

edited May 23 '17 at 10:26

Community

1
1

answered May 08 '14 at 03:33

Lucas Polonio

1,003
10
8

I know the triggers would be click, hover and resize if that helps, not that good with jQuery so not entirely sure how I would write this out. – JVK May 08 '14 at 04:31
Yea this seems to be on the right track, the part that I think is missing is that there will be multiple child elements and I don't know which child elements will be present at any given time. – JVK May 08 '14 at 22:22
On my example I used '.child' to select the child elements, assuming all children have the class 'child' on them. If they share one or a finite set of classes you can just change the selector to something like '.child1, .child2, .child3' and jQuery is going to select only the actually present elements that have one of those classes. – Lucas Polonio May 08 '14 at 22:38

score 0 · Answer 2 · answered May 08 '14 at 03:47

0

use .css()

http://jsfiddle.net/8R4Lh/

$(".whatever").css("height", $(".child").css("height"));

Though setting the parent to height auto should do it as well though.

answered May 08 '14 at 03:47

Thanks for commenting, I know I can get height auto on the parent to become the height of all the child elements but I need to know the exact px it is and apply it to the parent. And also check the the height again if the page is resized or a child element has changed it's size. – JVK May 08 '14 at 04:01
surround the above code with the following... $(document).resize(function(){ }); If the children change size, you will need to attach a trigger that calls the same code. like... $(".child").on("keyup blur click", function(){ code from above }); This would make it so that when the document resizes, the child is clicked, typed into, or clicked away from, it would activate. – May 08 '14 at 04:03

score 0 · Answer 3 · answered May 08 '14 at 05:21

0

This might be similar to what you intend to do:

http://codepen.io/anon/pen/CtBlq

answered May 08 '14 at 05:21

qtgye

3,580
2
15
30

score 0 · Answer 4 · answered Jul 23 '17 at 14:11

I had a similar problem where I wanted the parent's height to match with the tallest child element. I wanted this match to happen as soon as the page had finished loading, and I wanted to only apply it to elements belonging to a '.parent' class.

My jQuery code for this is as follows:

$(window).bind("load", function() {
    adjust();
    function adjust() {
        $('.parent').each(function(i, parent_obj) {
            var maxHeight = 0;
            $(parent_obj).children().each(function(j, child) {
                maxHeight = ($(child).height() > maxHeight ? $(child).height() : maxHeight);
            });
            $(parent).css("min-height", maxHeight)
        });
    }
});

The $(window).bind("load", function() { ... }); performs the function when the page has finished loading. An example HTML code for above function looks as follows:

<!--This section is affected by our jQuery script-->
<div class="parent">
    <div class="child-div1"><img src="image.jpg"/> </div>
    <img src="image2.jpg">
    <div class="child-div2"></div>
</div>

<!--This section is not affected-->
<div class="weird-uncle-bob">
    <div class="non-influencial-child">
        I can be as tall as I want to be. Bob is not gonna get taller.
    </div>
</div>

Also, please note that this also has the benefit of affecting each parent element individually. I had a problem of affecting all elements belonging to the '.parent' class simultaneously; not just the specific element affected. This solves that problem!

jQuery find the height of children and apply to parent

4 Answers4