tags:

views:

11961

answers:

4

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>
+1  A: 

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.

svinto
+1  A: 

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();
cobbal
Thanks $($("#parentDiv > DIV")[0]).height(); is about the closest I've gotten. It's returning an unexpected result though (664, it shouldn't be that large). I'll have to play with it.
Carter
the problem could also be that you're using absolute positioning for the image, try setting it to something else and see if your height is saner
cobbal
I think you may be right. However, that code is auto generated. I can move the div surround that code up there around which changes things, but I can't change any of the code I posted.
Carter
A: 

Try

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

That should do the trick

michal kralik
+1  A: 

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

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