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

Answer 2

h2是不是一个父a标签，所以你必须遍历到ul然后找到h2

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

演示： http ： //jsfiddle.net/awX9n/4/

Answer 3

好的，所以a没有h2的prent。 但你可以这样做：

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

这是一个有效的例子

这将首先找到ul parent（它是包含所需h2的最接近的父元素），然后它将找到h2元素。

重要的是要注意，如果您的结构更改为在父级ul包含更多h2元素，那么它将无法工作。 但我相信你知道那些事情

Answer 4

h2元素不是单击元素的父元素，您可以将类添加到最顶层的ul元素并使用closest方法：

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

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

您可以使用jQuery选择器来选择具有当前标记的元素，但使用类可以使您的代码更加清晰和高效。

Answer 5

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

会做的。

Answer 6

通过使用find()选项来尝试您的代码

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