Using jQuery to find ID of containing element

Question

<li id="someID">
    <div id="div1">Text</div>
    <div id="div2">Text x 2</div>
    <div id="div3">Text x 3</div>
        <span>
            <div>
                <ul>
                    <li class="menuItem">Menu Item</li>
                </ul>
            </div>
        </span>
</li>

In short, I'm trying to find the ID "someID" when the class "menuItem" is clicked. The code below doesn't seem to be cutting it.

$('.menuItem').click(function(){alert($(this).closest('li').attr('id'));});

Answer 1

If you want the parent then you could use .parent which is documented here

Answer 2

you can use .parent

.parents("li") so it will return the li parent

Answer 3

instead of .closest('li'). use the .parents('li'). (note the plural)

It is even mentioned at the closest() documentation ..

Answer 4

Another approach is to put a class on the li you are trying to identify, and make the .closest() selector more precise.

e.g.

<li class="master" id="someID">
    <div id="div1">Text</div>
    <div id="div2">Text x 2</div>
    <div id="div3">Text x 3</div>
        <span>
            <div>
                <ul>
                    <li class="menuItem">Menu Item</li>
                </ul>
            </div>
        </span>
</li>

$('.menuItem').click(function(){alert($(this).closest('li.master').attr('id'));});