How can I set the height of an element based on another element's height?

How can I set the height of an element based on another element's height?

Hi forum,

Please see code below. It illustrates how far I've gotten with my problem.

I'm trying to apply the computed height of each parent to their children. So child1.1 and child 1.2 need to take the height of its parent; child 2.1 and child 2.2 need to take the height of its parent; and so on.

In my code, it only appears to be working on the first parent. If you can tell me why this is, I would appreciate it!

JQ
  1. $(".parent").each(function () {
  2.       $(this).children().height($(this).height());        
  3. });
HTML
  1. <div class="parent">
  2.       <div class="chid1.1"></div>
  3.       <div class="chid1.2"></div>
  4. </div>
  5. <div class="divider"></div>
  6. <div class="parent">
  7.       <div class="chid2.1"></div>
  8.       <div class="chid2.2"></div>
  9. </div>
  10. <div class="divider"></div>
  11. <div class="parent">
  12.       <div class="chid3.1"></div>
  13.       <div class="chid3.3"></div>
  14. </div>

If this makes it easier, I can also accept this method:

Apply the computed max height of each child to its sibling. In other words, if child1.1 computed height is greater than child1.2, then I would like child1.2 to take child1.1's height (and vice-versa). Similarly, if child2.1 computed height is greater than child2.2, then child2.2 is to take the height of child 2.1; and so on

Thanks in advance.