How to make the height of a each div equal height with JavaScript?

Question

I am trying to make an object that will determine the highest height of a set of elements and make each element match the height of the largest.

In this object, I am trying to pass a selector to a JQuery method which resides inside of my object method. Unfortunately I am not able to get each item this way and my Each statement does not fire but the object returns 0 items.

Below is an example of my object:

var heightBalance = {
  containerName: '',
  childElements: '',
  alert: function() {
    var divs = $(this.childElements);
    console.log(divs);
    $.each(divs, function(index, value) {
      console.log('working');
    });

  }
}

heightBalance.containerName = '#containers';
heightBalance.childElements = 'div';
heightBalance.alert();

#one {
  background-color: green;
  width: 50px;
  height: 200px;
}
div {
  width: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="containers">
  <div id="one">d</div>
  <div id="two"></div>
  <div id="three"></div>
  <div id="four"></div>
  <div id="five"></div>
</div>

score 3 · Answer 1 · edited May 23 '17 at 12:22

You're script is initialized in the head, before the divs are rendered. Move the script to the end of the body, or use jQuery ready function (fiddle):

$(function () {
    var heightBalance = {
        containerName: '',
        childElements: '',
        alert: function () {
            var divs = $(this.childElements);
            console.log(divs);
            $.each(divs, function (index, value) {
                console.log('working');
            });

        }
    }

    heightBalance.containerName = '#containers';
    heightBalance.childElements = 'div';
    heightBalance.alert();
});

The code in this answer will give you the equal heights you want:

$(function() {
  // Get an array of all element heights
  var elementHeights = $('.features').map(function() {
    return $(this).height();
  }).get();

  // Math.max takes a variable number of arguments
  // `apply` is equivalent to passing each height as an argument
  var maxHeight = Math.max.apply(null, elementHeights);

  // Set each height to the max height
  $('.features').height(maxHeight);
});

score 2 · Answer 2 · answered Sep 30 '15 at 15:07

As the poster above states, your code is initializing in the head before your elements have loaded. If you looked at the object in the console, you can see that the object was referencing the root of your entire document. For future reference, in fiddle, under "Frameworks and Extensions" switching the second dropdown from "nowrap - in head" to "onload" can achieve the same result as the previous answer.

You're defining 2 variables. I assume the intention is to define a context - heightBalance.containerName and then search that context for the highest child and modify all children to match that height. heightBalance.childElements.

Your function doesn't make use of heightBalance.containerName. so $(this.childElements) just looks for any div on the page. in the console, you can see that the container is being listed along with the child elements.

You probably want to change it to something more like var divs = $('#containers').find('div') or shortform $('div', '#containers')

alert: function(){
       var divs = $('#containers').find('div') 
       console.log(divs); 
       $.each(divs, function(index, value){
        console.log('working'); 
       });  

   }

Thanks for the answer. Could you correct the syntax in your code sample, and add a snippet with a working example? — Selfish, Sep 30 '15 at 15:18
I went ahead and go this working and added it to the bottom of my js library: https://github.com/jdmagic21/useful-JavaScript-library/blob/master/tools.js — Coded Container, Sep 30 '15 at 17:12

score 0 · Answer 3 · answered Sep 30 '15 at 17:14

I modified my code a little and got this to work. Thank you for everyone showing me when I need to initialize JQuery to get this functioning.

var heightBalance = {
containerName:  '',
childElements: '', 
heightArray: [], 
calc: function(){
   var divs = $(this.containerName + " " + this.childElements); 
   $.each(divs, function(index, value){
    var innHeight = $(value).height(); ; 
    heightBalance.heightArray.push(innHeight); 
   });  
   this.largestHeight(this.heightArray); 
},
largestHeight: function(data)
 {
   var i = data.indexOf(Math.max.apply(Math, data));
   $(heightBalance.childElements).height(this.heightArray[i] ); 
  }
}

How to make the height of a each div equal height with JavaScript?

3 Answers3