CODEWITHSUNDEEP
jqueryhtmlheight
Carter
Carter

Reputation: 2870

How do I use jquery to get the height of a dynamically created child element with no Id

I have a div that dynamically get's loaded with two images always and possibly one div in between. Neither the images or the div have id's associated with them (and I can't make them have Id's). Inspecting them with firebug they are just shown as <IMG> and <DIV>. I need to get the height of this child div when it exists.

I was hoping I could do something like this...

$("#parentDiv > DIV").height();

or this...

$("#parentDiv > DIV")[0].height();

Since jquery $ returns an array. The second one gives javascript errors so I know I'm off there. I think these should be close though. Any ideas?

Edit: Here is the html I am running against. 

<DIV id="parentDiv" name="parentDiv">
    <IMG style="DISPLAY: block; VERTICAL-ALIGN: bottom; CURSOR: pointer" height="17" src="..." />

    <!-- this div may or may not be here -->
    <DIV style="DISPLAY: block; BACKGROUND-IMAGE: url(...); WIDTH: 16px; CURSOR: pointer; BACKGROUND-REPEAT: repeat-y; POSITION: relative; HEIGHT: 144px; outline: none">
        <DIV style="LEFT: 0px; OVERFLOW: hidden; WIDTH: 16px; POSITION: absolute; TOP: 128px; HEIGHT: 8px">
             <IMG style="LEFT: 0px; POSITION: absolute; TOP: 0px" height="8" src="..." />
        </DIV>
    </DIV>

    <IMG style="DISPLAY: block; VERTICAL-ALIGN: bottom; CURSOR: pointer" height="17" src="..." />
</DIV>

Upvotes: 6

Views: 61003

Answers (4)

Marius
Marius

Reputation: 58911

Just to add to all the other ways of doing it:

$("#parentDiv > div:first").height();

Upvotes: 2

mike
mike

Reputation: 5213

Try

$($("#parentDiv > div")[0]).height();

That should do the trick

Upvotes: 0

cobbal
cobbal

Reputation: 70703

to get an indexed jQuery element, use the eq() function:

$("#parentDiv > DIV").eq(0).height();

or

$($("#parentDiv > DIV")[0]).height();

or

$("#parentDiv > DIV:eq(0)").height();

Upvotes: 6

Svante Svenson
Svante Svenson

Reputation: 12488

Your first one will work, as long as your selector is okay. Try the following and see what you get:

$("#parentDiv > DIV").css("background", "pink");

If you don't get a pink background where you'd expect, fix your selector, and it'll work with the height-statement as well.

Upvotes: 1

Related Questions