Parent CSS (jQuery)

Question

There is <dl> with padding-top

<dl id="posters" style="padding-top: 150px;">
<dt class="active">text</dt>
<dd class="active"><a href="#"><img width="150" height="150" src="..." /></a></dd>
<dt>text 2</dt>
<dd><a href="#"><img width="150" height="250" src="..." /></a></dd>
<dt>text 3</dt>
<dd><a href="#"><img width="150" height="350" src="..." /></a></dd>
</dl>

The difference between images - height.

Trying to write a script, which will change a height of the <dl>, when <dd> is clicked.

Height should be taken from the height attribute of the dd img.

Tryed this, but had no luck:

$("#posters dt").click(function(){
        var parent_padding = $("dd").find("img").height();
        $("dd").closest("dl").css("padding-top",parent_padding);
    }).andSelf().addClass("active")});

Thanks.

Answer 1

Although your syntax is correct, trying to set a property can be set like this as well. .css(property, value);

Example

$(this).parent().css("padding-top", parent_padding);

$(this).css("color","red");

Reference and more examples: here

Answer 2

Updated:

$("#posters dd").click(function(){
    var parent_padding = $(this).find("img").height();
    $(this).closest("dl").css("padding-top",parent_padding);
});

Answer 3

Instead of getting the image's .attr('height') you can always just use the jQuery function .height().

Other than that, it should adjust your padding-top appropriately.

jsbin preview

Answer 4

In your HTML there's no element with the id posters, although that's what your selector is searching. Long shot, but maybe that's the problem? The rest of the code looks perfectly fine.