2

我想选择一个父 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/

4

6 回答 6

5

试试这个：

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

示例小提琴

请注意，如果您将classorid放在顶层ul.

更新

以下是使用 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!")
})
于 2012-12-13T10:16:55.547 回答
4

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/

于 2012-12-13T10:22:11.197 回答
2

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

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

这是一个工作示例

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

于 2012-12-13T10:17:27.187 回答
1

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.

于 2012-12-13T10:19:41.617 回答
0 
jQuery(this).parent().parent().parent().parent().find("h2").html("okay!");

会做的。

于 2012-12-13T10:16:58.100 回答
0

try your code by using find() option, like

jQuery("a").bind('click', function () {    
     jQuery(this).parents("ul").find("h2").html("okay!")
})
于 2012-12-13T10:25:22.730 回答