jQuery apply css to parent of class?

Question

So this is my current jQuery code:

$('.aProduct .inner').each(function() {
    var length = $.trim($(this).text()).length;    
    if(length > 20){
        $(this).css("max-height", "20px");
    }
    else {
        $(this).css("background", "blue");
    }
});

And it says: if the length of the characters is bigger than 20, apply this CSS to .aProduct .inner:

$(this).css("max-height", "20px");

However, is it possible to give this max-height to the parent of this class? I don't mean just to replace this by .aProduct .omschrijving, because then ALL the .aProduct .omschrijving would have a max-height of 20. I only want the parent the parent of which the class .aProduct .omschrijving has more characters than 20, to have a max-height of 20px.

HTML:

<div class="aProductHeader">
    <div class="omschrijving">
        <h3>omschrijving</h3>
    </div>
</div>
<div class="aProduct">
    <div class="omschrijving">
        <span class="entry inner">
            Toddler bestek blauw
        </span>
    </div>
</div>

This probably sounds really confusing, but I don't know how else to explain this.

api.jquery.com/parent or api.jquery.com/closest

Blazemonger
– Blazemonger

2014-05-19 13:48:20 +00:00
Commented May 19, 2014 at 13:48 — Blazemonger
– Blazemonger, Commented May 19, 2014 at 13:48

j08691 · Accepted Answer · 2014-05-19 13:48:26Z

3

Change:

if(length > 20){
    $(this).css("max-height", "20px");
}

to:

if(length > 20){
    $(this).closest('.omschrijving').css("max-height", "20px");
}

answered May 19, 2014 at 13:48

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

2339870 Over a year ago

Works beautifully. Is there also a solution in case I would also like to style the .omschrijving class from the different parent .aProductHeader?

j08691 Over a year ago

Based on the same criteria of the text length?

2339870 Over a year ago

Yes, in the same function.

j08691 Over a year ago

$(this).closest('.aProduct').prev('.aProductHeader').find('.omschrijving').css("max-height", "20px"); will select the <div class="omschrijving"> from the previous <div class="aProductHeader">.

2339870 Over a year ago

Wow, this looks a bit more complicated than I thought. I'll have to look this up a bit more. Thank you for the help!

Collectives™ on Stack Overflow

jQuery apply css to parent of class?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related