CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Coded Container
Coded Container

Reputation: 863

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

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>

Upvotes: 0

Views: 263

Answers (3)

Coded Container
Coded Container

Reputation: 863

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] ); 
  }
}

Upvotes: 0

Ryan Brinn
Ryan Brinn

Reputation: 41

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'); 
       });  

   }

Upvotes: 2

Ori Drori
Ori Drori

Reputation: 191976

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);
});

Upvotes: 3

Related Questions