Parent CSS (jQuery)

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.

I'm guessing that the default behavior of the a element is firing and reloading the page.

Parent should still work, because the event is on the <dd>.

Try this:

$("#posters dd").click(function(e){
    e.preventDefault();
    var parent_padding = $(this).find("img").attr("height");
    $(this).parent().css({"padding-top":parent_padding});
});

EDIT:

Looking at your code, it is quite different from what you posted.

There are several issues.

I don't think end() is being used properly (not sure though).

prev() shouldn't accept a function as an argument.

Gave up after that.

Posted code from link provided:

Just so it is clear, the code example below is not a solution. It is the actual code that you are using (based on the link you provided). I did nothing to correct it. I'm just making the point that it would be extremely helpful if you would post the actual code you're using in your question instead of a modified version. As it turns out, your modified version in the question eliminated the error(s).

$("dt").click(function(){
    $(this).siblings()
             .removeClass("active")
             .end()
        .prev(function(){
                    $("dd").parent()
                        .css({'padding-top':$(this).find('img').height()});
    }).andSelf().addClass("active")});
    $("#posters dt").fadeTo("fast",.7);$("#posters dt").hover(function(){$(this).fadeTo("fast",.9)},function(){$(this).fadeTo("fast",.7)});
                                                                         $("#posters .toggle a").click(function(){$(this).toggleClass('active');$("#posters dt").toggle();return false});
  }); 

In the future, please post the code you're actually using. In this case, you modified out the error. Had you posted the actual event handler, you would have had an immediate solution.

PARTIAL SOLUTION:

This is the beginning of a solution.

You were assigning events inside of the click event handler. This is not right, so I just removed them. I'll consider those to be a separate issue for now.

This (as far as I can tell) will do what you want with the padding. Please notice that your click event is on the dt and not the dd, since that is how you had it in your code.

If the event should be on the dd, then change it to #('posters dd').click(... and get rid of next() on the next line down.

$("#posters dt").click(function(){
    var padding = $(this).next().find('img').attr('height');
    $(this)
        .addClass('active')
        .siblings()
        .removeClass("active");
    $(this).parent()
        .css({'padding-top':padding});
}); ​

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

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

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.

Updated:

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