Selecting the height of several elements ();

Question

Hi guys, I'm just wondering why this jQuery won't work:

hdr = $('.header-wrapper, #top-bar, #new-showroom-header').height(); 

So, as you can see, I'm trying to get the height from several elements and store them in my variable. I would expect jQuery to add all the heights of the elements together to create the final value, but when I console.log the hdr variable, I get the height of the first selected element.

Any idea how I can select all and save them in my var?

Thanks Nick

Answer 1

Use $.each() to get the total height.

 var hdr = 0; $('.header-wrapper, #top-bar, #new-showroom-header').each(function () { hdr += $(this).height(); }); 

FIDDLE DEMO

Answer 2

You can write a jQuery plugin for this script. :)

The following code below will return an array of heights based on the provided selectors.

 [20,30,80] 

JQuery plugin

 (function($) { $.fn.heights = function() { return this.map(function() { return $(this).height(); }).toArray(); }; }(jQuery)); var heights = $('.header-wrapper, #top-bar, #new-showroom-header').heights(); document.body.innerHTML = JSON.stringify(heights); // [20,30,80] 

 body { font-family: monospace; white-space: pre; } .header-wrapper { height: 20px; } #top-bar { height: 30px; } #new-showroom-header { height: 80px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="page-wrapper"> <div class="header-wrapper"></div> <div id="top-bar"></div> <div id="new-showroom-header"></div> </div> 

---

Alternatively, you can create a height cache with your selectors.

 { "html>body>div>.header-wrapper": 20, "html>body>div>#top-bar": 30, "html>body>div>#new-showroom-header": 80 } 

 (function($) { $.reduce = function(arr, fn, initVal) { if (Array.prototype.reduce) { return Array.prototype.reduce.call(arr, fn, initVal); } $.each(arr, function(i, val) { initVal = fn.call(null, initVal, val, i, arr); }); return initVal; }; $.fn.heights = function() { return $.reduce(this, function(map, el) { map[$(el).fullSelector()] = $(el).height(); return map; }, {}); }; $.fn.fullSelector = function() { var sel = $(this) .parents() .map(function() { return this.tagName.toLowerCase(); }) .get() .reverse() .concat([this.nodeName]) .join(">"); var id = $(this).attr('id'); if (id) { sel += '#' + id; }; var cls = $(this).attr('class'); if (cls) { sel += '.' + $.trim(cls).replace(/\s/gi, '.'); }; return sel; } }(jQuery)); var heights = $('.header-wrapper, #top-bar, #new-showroom-header').heights(); document.body.innerHTML = JSON.stringify(heights, null, 2); 

 body { font-family: monospace; white-space: pre; } .header-wrapper { height: 20px; } #top-bar { height: 30px; } #new-showroom-header { height: 80px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="page-wrapper"> <div class="header-wrapper"></div> <div id="top-bar"></div> <div id="new-showroom-header"></div> </div> 

The credit for the selector algorithm goes to Jesse Gavin .

Answer 3

No, you cannot get the whole height of an element using .height (); function first you apply the $ .each () loop in the collection, then you can get the height one by one the following code will help you

 $.each($('.header-wrapper, #top-bar, #new-showroom-header'),function(ind,item){ var Height = $(item).height(); });