jQuery父母选择器

Question

我想选择一个父H2取决于被点击的元素示例:

<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>

我有3个链接在不同的地方.我的JS功能:

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

})

所以,我想更改父H2的内容,link1单击更改title1,link2必须更改title2.

我的测试:http://jsfiddle.net/Kaherdin/awX9n/1/

Answer 1

试试这个:

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

示例小提琴

注意,如果你把一个class或者id放在顶层,你可以使选择器更简单,更快ul.

更新

以下是如何使父级上的类更简单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!")
})