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

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});
}); ​