jQuery.parents() 函数详解
parents()函数用于选取每个匹配元素的祖先元素,并以jQuery对象的形式返回。
你还可以使用选择器来进一步缩小选取范围,只选取其中符合指定选择器的元素。
该函数属于jQuery对象(实例)。
语法
JavaScript:
jQueryObject.parents([selector])
参数
参数描述
selector可选/String类型指定的选择器字符串,用于筛选匹配的元素。
parents()函数将选取当前jQuery对象每个匹配元素的符合选择器selector的祖先元素。
如果省略selector参数,则选取所有的祖先元素。
返回值
parents()函数的返回值为jQuery类型,返回一个新的jQuery对象,该对象封装了当前jQuery对象每个匹配元素的符合选择器selector(如果指定了的话)的所有祖先元素。
如果没有符合条件的元素,则返回空的jQuery对象。
示例&说明
以下面这段HTML代码为例:
HTML:
<!DOCTYPE html><html><body><divid="n1"><pid="n2"></p><pid="n3"><spanid="n4"class="foo"></span></p></div><divid="n5"class="bar"><pid="n6"class="foo"></p></div></body></html>
以下jQuery示例代码用于演示parents()函数的具体用法:
JavaScript:
// 返回jQuery对象所有匹配元素的标识信息数组// 每个元素形如:
tagName或tagName#id(如果有id的话)
function getTagsInfo($doms){
return $doms.map(function(){
returnthis.tagName+(this.id?"#"+this.id:"");
}).get();
}
var$n4=$("#n4");//获取n4的祖先元素
var $parents1=$n4.parents();
document.writeln(getTagsInfo($parents1));// P#n3,DIV#n1,BODY,HTMLvar$p=$("p");//获取所有p元素的祖先元素
var $parents2=$p.parents();
document.writeln(getTagsInfo($parents2));// DIV#n5,DIV#n1,BODY,HTML
//获取所有p元素的包含类名"bar"的祖先元素
var $parents3=$p.parents(".bar");document.writeln(getTagsInfo($parents3));// DIV#n5
var$foo=$(".foo");//获取所有包含类名"foo"的元素的祖先元素中的div元素
var$parents4=$foo.parents("div");document.writeln(getTagsInfo($parents4));// DIV#n5,DIV#n1