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

运行一下