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 the images is height .

Trying to write a script that changes height <dl> when the <dd> button is pressed.

The height should be taken from the height attribute dd img .

Tried this but 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 assume that the default behavior of element a starts and reloads the page.

The parent must work because the event is on <dd> .

Try the following:

 $("#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 very different from what you posted.

There are several issues.

I don't think end() used correctly (not sure though).

prev() should not take a function as an argument.

It developed after that.

Sent code from the provided link:

Just so clear, the sample code below is not a solution. This is the actual code you are using (based on the link you provided). I did nothing to fix it. I simply declare that it would be very useful if you publish the actual code that you use in your question instead of the modified version. As it turned out, your modified version in the question fixed 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 write the code that you use. In this case, you have changed the error. If you hosted the actual event handler, you would have an immediate solution.

---

PARTIAL SOLUTION:

This is the beginning of the decision.

You assigned events inside the click event handler. This is wrong, so I just deleted them. At the moment I will consider them separately.

This (as far as I can tell) will do what you want with the addition. Note that your click event is on dt , not dd , as it was in your code.

If the event should be on 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}); }); ​ 

Answer 2

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

In addition, he must configure your padding-top accordingly.

jsbin preview

Answer 3

Although your syntax is correct, you can also set the property setting. .css (property, value);

Example

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

Link and other examples: here

Answer 4

Updated:

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

Answer 5

There is no element with id posters in your HTML, although this is what your selector is looking for. A long shot, but maybe a problem? The rest of the code looks great.