jQuery parents selector

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

Try this:

jQuery("a").bind('click', function () {    
   jQuery(this).closest("ul:has(h2)").find("h2").html("okay!")
})

Example fiddle

Note, you could make that selector much simpler and faster if you put a class or id on the top-level ul .

Update

Here's how make it simpler with a class on the parent ul :

<ul class="list-parent">
    <h2>Title1</h2>
    <li>Test</li>
    <li>sub menu
        <ul>
            <li><a href="#">link1</a></li>
        </ul>
    </li>
</ul>

jQuery("a").bind('click', function () {    
   jQuery(this).closest(".list-parent").find("h2").html("okay!")
})

Answer 2

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/

Answer 3

OK so a doesn't have a prent of h2 . But you can do this:

e.preventDefault();
$(this).closest('ul:has(h2)').find('h2').html('okay!');

Here is a working example

This will first find the ul parent (which is the closest parent element that contains the h2 you want) and then it will find the h2 element.

It is important to note, that if your structure changes to include more h2 element inside the parent ul then it will not work. But I am sure you are aware of those kind of things

Answer 4

h2 element is not parent of the clicked element, you can add a class to the topmost ul elements and use closest method:

<ul class='parent'><h2>Title1</h2>

jQuery(this).closest("ul.parent").children("h2").html("okay!");

You can use jQuery selectors for selecting the element with your current markup, but using classes makes your code more cleaner and efficient.

Answer 5

jQuery(this).parent().parent().parent().parent().find("h2").html("okay!");

会做的。

Answer 6

try your code by using find() option, like

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