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>

我有三个位于不同位置的链接。我的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!")
})

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。但你可以这样做：

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

Here is a working example

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

请务必注意，如果您的结构更改为在父h2中包含更多ul元素，那么它将无效。但我相信你知道那些事情

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

jQuery父母选择器

6 个答案: