is it possible to get the height of a cloned jQuery object?

Question

Sample jQuery:

$('document').ready(function(){
    var $theP = $('p');
    var $theDiv = $('div');
    $theP.html($theP.html() + "<br>div height: " + $theDiv.outerHeight());
    var $theClone = $theDiv.clone();
    $theP.html($theP.html() + "<br>clonded div height: " + $theClone.outerHeight());
})

Live link: http://jsbin.com/odujiv/4

In running above, you get a result of '0' when trying to get its height. I think this is due to the fact that the cloned object hasn't yet been put into the DOM. Is the only way to get the height to first add the cloned element back to the DOM? If so, I think that's doable, but it'd be great to handle it before I put it back into the DOM.

There's a 'hacky' solution for something similar proposed here: http://stackoverflow.com/questions/2345784/jquery-get-height-of-hidden-element-in-jquery-1-4-2 — Clive, Sep 27 '11 at 19:37
Yea, I imagine the solution is that I have to add it to the DOM before getting it's height. That will probably work. I could add it to the DOM, position it off-screen, get the height, do my calculations, then position it where I want. — DA., Sep 27 '11 at 19:44
I've run into this before - adding to the DOM off-screen did the trick. — Pat, Sep 27 '11 at 19:48

score 3 · Accepted Answer · answered Jul 02 '13 at 20:32

3

No, unfortunately. Raw HTML elements don't have sizes when not attached to the document, and jQuery hasn't implemented a workaround. I assume that this is because of how interdependent HTML elements' sizes are on each other!

answered Jul 02 '13 at 20:32

Dave

487
2
12

score -1 · Answer 2 · answered Sep 27 '11 at 19:37

-1

Try this:

$theClone.height();

or

$theClone.css('height');

answered Sep 27 '11 at 19:37

Faraona

1,685
2
22
33

1

I specifically need outerHeight, but the issue is the same. The above also returns 0 – DA. Sep 27 '11 at 19:42

is it possible to get the height of a cloned jQuery object?

2 Answers2