CODEWITHSUNDEEP
jquerycss
2339870
2339870

Reputation: 1487

jQuery apply css to parent of class?

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.

Upvotes: 0

Views: 43

Answers (1)

j08691
j08691

Reputation: 207881

Change:

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

to:

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

Upvotes: 3

Related Questions