Question

I want to select a parent H2 depends on element which was clicked
Example :

<ul><h2>Title1</h2>
    <li>Test</li>
    <li>sub menu
        <ul>
            <li><a href="#">link1</a></li>
        </ul>
    </li>
</ul>
<br/>


<ul><h2>Title2</h2>
    <li>Test</li>
    <li>ubmenu
        <ul>
            <li><a href="#">link2</a></li>
            <li>sub sub menu
                <ul>
                    <li><a href="#">link2</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

I have 3 links that are in different places.
My JS function :

jQuery("a").bind('click', function () {    
       jQuery(this).parents("h2").html("okay!")

})

So, I want to change the content of the parent H2, link1 click change the title1 and both link2 must change the title2.

My test : http://jsfiddle.net/Kaherdin/awX9n/1/

Answer 1

h2 is not a parent of the a tag so you must traverse up to the ul then find the h2

jQuery("a").on('click', function () {   
    jQuery(this).parents("ul").find("h2").html("okay!")
});

Demo: http://jsfiddle.net/awX9n/4/