1.parent
parent() 获得当前匹配元素集合中每个元素的父元素,使用选择器进行筛选是可选的。
<ul id="menu" style="width:100px;">
<li>Start</li>
<li>
<ul>
<li>
<ul>
<li><a href="#">Home</a></li>
</ul> </li>
<li>middle</li>
</ul>
</li>
<li>End</li>
</ul>
$("#menu a").click(function() {
$(this).parent("ul").css("background", "yellow");//无效
$(this).parent("li").parent("ul").css("background", "yellow");
}
第二行是无效的。因为a的父级是li而不是ul.第三行会使Home外的ul背景变黄色。
2.parents
parents() 获得当前匹配元素集合中每个元素的祖先元素,使用选择器进行筛选是可选的。
$("#menu a").click(function() {
$(this).parents("ul").css("background", "yellow");}
整个背景都会变黄。
3.closest
closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。
$("#menu a").click(function() {
$(this).parent("ul").css("background", "yellow");
}
只有home外的ul的背景变黄
三者联系:
$("#menu a").click(function() {
$(this).parent("li").parent("ul").css("background", "yellow");
$(this).parents("ul").eq(0).css("background", "yellow");
$(this).closest("ul").css("background", "yellow"); });
以上2 3 4行达到的效果是一致的。