get highest div

Question

I saw a lot of things on stack overflor to get the highest div, only non of them where working for me. I need to get the height of the div preview_txt.

<div class="headline" data-rating="0.482005543693" onclick="javascript:showArticle(1076);" style="display: none; ">
    <div class="headline_txt">
        <h1>#3726: Meryl Streep schittert in The Iron Lady- alle recensies op een rijtje</h1>
    </div>
    <div class="preview_txt">
        <p>
            De eerste foto's van actrice Meryl Streep als de Britse voormalig premier Margaret Thatcher
            <a href="http://www.guardian.co.uk/film/2011/feb/08/meryl-streep-margaret-thatcher-iron-lady#">
                leidden
            </a>
            vorig jaar al tot een stortvloed aan publiciteit. Nu is
            <a href="http://www.imdb.com/title/tt1007029/">
                <em>The Iron Lady</em>
            </a>
             er dan ook echt. Vanaf vandaag draait de film in de Nederlandse bioscopen. Lees hier alle recensies. 
            <!--more-->
        </p>
    </div>                  
</div>

From the things i saw arround i think i liked this one the most:

var maxHeadLineHeight = Math.max.apply(Math, $("#headline").map(
    function(){
        return $(this).height();
    }
));

console.log("maxHeadLineHeight: "+maxHeadLineHeight);

But that gives me:

Uncaught TypeError: Function.prototype.apply: Arguments list has wrong type

I also tried it like:

"#headline .preview_txt"

while where at it, setting the height for each headline div will be next but that probably won't be that different (by getting the objects).

Answer 1

There are two problems with the code:

1. Your selector is wrong.

$("#headline") will find an element with an id of headline, not a class of headline.

Try this instead:

$(".headline").map(...

2. You forgot to include .get() after .map()

I'm not sure why this is important, but examples similar to the code you've posted all say you need to call:

$('<someSelectorHere>').map(function () { /* some mapping code here ... */ })
    .get(); // <-- The part you missed - won't work without it

See this example:

• https://stackoverflow.com/a/5052710/232593

Edit:

According to comments and the jQuery docs, it seems that calling the .get() method is important because the objects returned by jQuery aren't truly arrays - they just masquerade as arrays. While some browsers are okay with this (seemingly Firefox), other browsers can't deal with it. So you need to add the .get() to convert to a real array and support those browsers.

Demo of a working version of the code you provided:

• http://jsfiddle.net/zvu2n/

The Javascript from that demo:

var headlineHeights = $(".headline").map(function() {
    return $(this).height();
}).get();

var maxHeadLineHeight = Math.max.apply(Math, headlineHeights);

alert("maxHeadLineHeight: " + maxHeadLineHeight);

Answer 2

Hmm, that seems to work in firebug though. On this page, the following code gives an answer (625 in my browser at least).

Math.max.apply(Math, $("#question").map(
 function(){
   return $(this).height();
 }
));

or apparently for other browsers

Math.max.apply(Math, $("#question").map(
 function(){
   return $(this).height();
 }
).get());

But it's a bit strange, since in your code you check an ID (which will be 0 or 1 element), and maxing that is kinda obvious. So I think something else is going wrong. I'd expect a good answer if #question is replaced by .headline .preview_text