CODEWITHSUNDEEP
jqueryhtmlcss
Farzad Bayan
Farzad Bayan

Reputation: 251

check several heights and hide an item of tall item container parent

There is a .blog DIV which contains three article each one has a h1 and h4, when the h1 meets the .blog's width, it breaks into two line, so will have a taller height (taller than 50px)

<div class="blog">
    <article>
        <h1>Hello There</h1>
        <h4>Description 1</h4>
    </article>
    <article>
        <h1>Hello There</h1>
        <h4>Description 2</h4>
    </article>
    <article>
        <h1>Hello There I'm a long text who have a more than 50px height</h1>
        <h4>Description 3</h4>
    </article>
</div>

I want to hide its h4 when it have a height taller than 50px.

var max=50;
$('.blog article').find('h2').each( function (){
    if($(this).height()>max)
    $("article h4").hide();
});

Yes I know it will hide all of the three h4s, so what I should do to only hide the tall h1 container article h4?

Upvotes: 0

Views: 31

Answers (2)

kei
kei

Reputation: 20491

var max=50;
$('.blog article').find('h1').each( function (){
    if($(this).height()>max)
    $(this).next('h4').hide();
});

Upvotes: 1

Kaizen Programmer
Kaizen Programmer

Reputation: 3818

I removed the find('h2') because it didn't appear anywhere else in your question.

var max=50;
$('.blog article').each( function (){
    if($(this).height()>max)
        $(this).closest('h4').hide();
});

Upvotes: 0

Related Questions