[英]jQuery parents selector
I want to select a parent H2 depends on element which was clicked Example : 我想选择一个父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>
I have 3 links that are in different places. 我有3个链接在不同的地方。 My JS function :
我的JS功能:
jQuery("a").bind('click', function () {
jQuery(this).parents("h2").html("okay!")
})
So, I want to change the content of the parent H2, link1 click change the title1 and both link2 must change the title2. 所以,我想更改父H2的内容,link1单击更改title1,link2必须更改title2。
My test : http://jsfiddle.net/Kaherdin/awX9n/1/ 我的测试: http : //jsfiddle.net/Kaherdin/awX9n/1/
Try this: 尝试这个:
jQuery("a").bind('click', function () {
jQuery(this).closest("ul:has(h2)").find("h2").html("okay!")
})
Note, you could make that selector much simpler and faster if you put a class
or id
on the top-level ul
. 注意,如果将
class
或id
放在顶级ul
上,则可以使选择器更简单,更快捷。
Update 更新
Here's how make it simpler with a class on the parent 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!")
})
h2
is not a parent of the a
tag so you must traverse up to the ul
then find the h2
h2
是不是一个父a
标签,所以你必须遍历到ul
然后找到h2
jQuery("a").on('click', function () {
jQuery(this).parents("ul").find("h2").html("okay!")
});
Demo: http://jsfiddle.net/awX9n/4/ 演示: http : //jsfiddle.net/awX9n/4/
OK so a
doesn't have a prent of h2
. 好的,所以
a
没有h2
的prent。 But you can do this: 但你可以这样做:
e.preventDefault();
$(this).closest('ul:has(h2)').find('h2').html('okay!');
Here is a working example 这是一个有效的例子
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. 这将首先找到
ul
parent(它是包含所需h2
的最接近的父元素),然后它将找到h2
元素。
It is important to note, that if your structure changes to include more h2
element inside the parent ul
then it will not work. 重要的是要注意,如果您的结构更改为在父级
ul
包含更多h2
元素,那么它将无法工作。 But I am sure you are aware of those kind of things 但我相信你知道那些事情
h2
element is not parent of the clicked element, you can add a class to the topmost ul
elements and use closest
method: h2
元素不是单击元素的父元素,您可以将类添加到最顶层的ul
元素并使用closest
方法:
<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. 您可以使用jQuery选择器来选择具有当前标记的元素,但使用类可以使您的代码更加清晰和高效。
jQuery(this).parent().parent().parent().parent().find("h2").html("okay!");
会做的。
try your code by using find()
option, like 通过使用
find()
选项来尝试您的代码
jQuery("a").bind('click', function () {
jQuery(this).parents("ul").find("h2").html("okay!")
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.