Capturing height of parent DIV

Question

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

Answer 1

Use parents() or parent()

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

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

        alert(getHeight);

        return false;
    });

Answer 2

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

JsFiddle Link

Answer 3

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

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

Answer 4

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;
});