Equal Heights of Element

Question

So what I'm doing is trying to make a certain class of objects all equal, but make it useful and simplistic enough be re-purposed throughout various documents.

Everything look valid and legit to me, but something is messing up.

function cardHeights(divGroup) { console.log("This is running"); divGroup.each(function (e) { var current = $(this), curTallest = 0; if (current.height() > curTallest) { curTallest = current.height(); console.log(curTallest); } divGroup.height(curTallest); }); }

Then I use this to call the function to work.

$(document).ready(function () { cardHeights('.card'); $(window).on('resize', cardHeights('.card')); });

Here is a codepen where I got it to work, but I can't get it to work on an actual site. Which is weird to me. It gives an error that it is not a defined function.

TypeError: e.each is not a function

http://codepen.io/ddavisgraphics/pen/ZYQxqq

You are resetting curTallest to zero upon each iteration. You may want to set this outside of your each loop. Also, only reset the divGroup height if current.height() > curTallest. — showdev
– showdev, Commented Dec 11, 2014 at 21:11
cardHeights() expects a jQuery object. You are passing it a string. — showdev
– showdev, Commented Dec 11, 2014 at 21:14
Yes, or generate that object from the string inside your function, e.g. var divGroupObject = $(divGroup). Either way. — showdev
– showdev, Commented Dec 11, 2014 at 21:19

showdev · Accepted Answer · 2014-12-11 21:53:20Z

To reiterate my comments:

Resetting curTallest on each iteration will prevent finding the tallest element. Each element in the loop will be considered the tallest because curTallest is reset to zero each time.
You'll only need to reset the height of divGroup if current.height() > currTallest. Currently, you reset the heights upon each iteration, regardless of whether currTallest has changed.
cardHeights() expects a jQuery object. You are passing it a string. Either pass a jQuery object or convert the string to an object within the function.

That being said, my suggestion is to collect all heights, determine the maximum height from those values, and set all heights to the maximum height. This prevents needlessly setting heights multiple times.

Here's an example:

$(function() { cardHeights('.card'); $(window).on('resize', cardHeights('.card')); }); function cardHeights(divGroup) { /* Initialize variables */ var heights = [], $group = $(divGroup); /* Iterate through the selected elements, pushing their heights into an array */ $group.each(function() { heights.push($(this).height()); }); /* Determine the maximum height in the array */ var maxHeight = Math.max.apply(Math, heights); /* Set the height of all elements in the group to the maximum height */ $group.height(maxHeight); }

div.card { background-color: #CCC; margin: 1em; padding: 1em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="card">Test</div> <div class="card">Test<br />Tester<br />Testing<br />Test-o-rama<br />Tallest!</div> <div class="card">Test<br />Tester</div>

Edit

If, for some reason, you don't want to use an array, you can use your original method of comparing each element's height to the maximum height:

function cardHeights(divGroup) { /* Initialize variables */ var $group = $(divGroup), maxHeight=0, thisHeight=0; /* Iterate selected elements, reset maxHeight if the current height is taller */ $group.each(function() { thisHeight=$(this).height(); if (thisHeight>maxHeight) {maxHeight=thisHeight;} }); /* Set the height of all elements in the group to the maximum height */ $group.height(maxHeight); }

Thanks I will work something up but I get what your saying. Thank you both. I never think of arrays on frontend jobs.

szupie · Accepted Answer · 2014-12-11 21:15:25Z

0

cardHeights('.card'); should be cardHeights($('.card')); because divGroup in cardHeights(divGroup) is supposed to be a jQuery object

answered Dec 11, 2014 at 21:15

szupie

85610 silver badges18 bronze badges

1 Comment

Dave D Over a year ago

This does solve the problem I'm having. It won't let me check the answer yet, but I'm also going to listen to showdev suggestion to see if that is a better option. Thank you all for your help.

Collectives™ on Stack Overflow

Equal Heights of Element

2 Answers 2

Edit

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit

2 Comments

1 Comment

Related