美文网首页
jQuery.parents() 函数详解

jQuery.parents() 函数详解

作者: 骑着蜗牛撵大象 | 来源:发表于2019-11-07 16:26 被阅读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

    相关文章

      网友评论

          本文标题:jQuery.parents() 函数详解

          本文链接:https://www.haomeiwen.com/subject/yxueuctx.html