返回宝典

jQuery 祖先

上一节 下一节

jQuery遍历 - 祖先(Ancestors)

父元素、父元素的父元素、父元素的父元素的父元素……都是祖先。

向上遍历DOM树

jQuery提供了3种常用的方法来向上遍历DOM树:

  • parent()
  • parents()
  • parentsUntil()

jQuery parent()方法

jQuery中的parent()方法会返回指定元素的父元素。(备注:爷爷元素不是父元素)

$(document).ready(function(){
    $("span").parent().css({"color": "red", "border": "2px solid red"});
});

运行一下

jQuery parents()方法

jQuery中的parents()方法会返回指定元素所有的祖先元素

$(document).ready(function(){
    $("span").parent().css({"color": "red", "border": "2px solid red"});
});

运行一下


靠,上述例子中连body元素都变红了,太可怕了;不过parents()方法还可以对祖先元素做一个筛选,选出符合条件的祖先元素进行搞事,筛选的条件就类似CSS选择器,举例如下,选择祖先元素中所有p元素:

$(document).ready(function(){
    $("span").parents("p").css({"color": "red", "border": "2px solid red"});
});

运行一下

jQuery parentsUntil()方法

jQuery中的parentsUnitl("结束条件")会向上依次遍历并返回祖先元素,直到遇到符合结束条件的祖先元素结束遍历(符合结束条件的祖先元素不被返回)。结束条件筛选器,类似CSS选择器。如下所示,遇到为div元素的祖先元素则停止遍历返回。

$(document).ready(function(){
    $("span").parentsUntil("div").css({"color": "red", "border": "2px solid red"});
});

运行一下


jQuery 祖先

上一节 下一节