CODEWITHSUNDEEP
javascriptjqueryhtmlheight
Oam Psy
Oam Psy

Reputation: 8663

Capturing height of parent DIV

I have a web page with a number of ul lists. Each ul list is surrounded by a div with a class .content.

What i am trying to do, is get the height of the .content DIV when its corresponding li within a ul is clicked.

My code at the minute is only setting the height of the first content DIV on the page.

HTML:

<ul class="myList">
    <li>
        <div class="heading">
            <a>Menu 1</a>
        </div>
        <div class="content">
                <h2>Menu 1</h2>
            <ul class="show-hide">
                <li>
                    <a href="">How to reach us</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>
                    <a href="">How to email us</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>
                    <a href="">Contact Number</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
            </ul>
        </div>
    </li>
    <li>
        <div class="heading">
            <a>Menu 2</a>
        </div>
        <div class="content">
                <h2>Menu 2</h2>
            <ul class="show-hide">
                <li>
                    <a href="">How to reach us</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
            </ul>
        </div>
    </li>
    <li>
        <div class="heading">
            <a>Menu 3</a>
        </div>
        <div class="content">
                <h2>Menu 3</h2>
            <ul class="show-hide">
                <li>
                    <a href="">How to reach us</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>
                    <a href="">How to email us</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>
                    <a href="">Contact Number</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>
                    <a href="">How to email us</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
                <li>
                    <a href="">Contact Number</a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                </li>
            </ul>
        </div>
    </li>
</ul>

jQuery:

$('.show-hide').on('click', function () {

    getHeight = $('.content').height();

    alert(getHeight);

    return false;
});

My fiddle: http://jsfiddle.net/oampz/BK7yw/

Any help appreciated

Upvotes: 2

Views: 85

Answers (4)

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67217

You just selected all the elements with the class name content. But your requirement is to select the element with the class content within the clicked element's context. so you have to prefer $(this) reference for that first, then try use .closest() to find the closest element with the supplied selector,

$('.show-hide').on('click', function () {
    getHeight = $(this).closest('.content').height(); 
    alert(getHeight);
    return false;
});

Upvotes: 1

Ankur Aggarwal
Ankur Aggarwal

Reputation: 3101

Use .parents() api https://api.jquery.com/parents/

 getHeight = $(this).parents('.content').height();

Upvotes: 1

Dhanu Gurung
Dhanu Gurung

Reputation: 8858

Try to use jQuery#closest() as : $(this).closest('.content').height();

JsFiddle Link

Upvotes: 2

davey
davey

Reputation: 1791

Use parents() or parent() 

   $('.show-hide').on('click', function () {

        getHeight = $(this).parents('.content').height();

        alert(getHeight);

        return false;
    });

Upvotes: 2

Related Questions