jQuery parent 选择器

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!")
})

Example fiddle

请注意，如果您将 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!")
})