jQuery.parents() 函数详解

2019-11-07  本文已影响0人  骑着蜗牛撵大象

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

上一篇下一篇

猜你喜欢

热点阅读