jQuery遍历之parents()方法

jQuery是一个合集对象,如果想快速查找合集里面的每一个元素的所有祖辈元素,此时可以用parents()方法

其实也类似find与children的区别,parent只会查找一级,parents则会往上一直查到查找到祖先节点

理解节点查找关系:

<div class="div">
   <ul class="son">
       <li class="grandson">1</li>
   </ul>
</div>

在li节点上找到祖 辈元素div, 这里可以用$("li").parents()方法

parents()无参数

parents()方法允许我们能够在DOM树中搜索到这些元素的祖先元素,从有序的向上匹配元素,并根据匹配的元素创建一个新的 jQuery 对象;

返回的元素秩序是从离他们最近的父级元素开始的

注意:jQuery是一个合集对象,所以通过parent是匹配合集中所有元素的祖辈元素

         parents()方法选择性地接受同一型选择器表达式

        同样的也是因为jQuery是合集对象,可能需要对这个合集对象进行一定的筛选,找出目标元素,所以允许传一个选择器的表达式

注意事项:

    1 .parents()和.parent()方法是相似的,但后者只是进行了一个单级的DOM树查找
    2  $( "html" ).parent()方法返回一个包含document的集合,而$( "html" ).parents()返回一个空集合。

下面我们来看一段代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <div>php.cn
        <ul>php
          <li>php 中文网</li>
          <li>php 中文网</li>
        </ul>
    </div>
<script>
    $("li").parents().css('color','red');
</script>

</body>
</html>
继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <div>php.cn <ul>php <li>php 中文网</li> <li>php 中文网</li> </ul> </div> <script> $("li").parents().css('color','red'); </script> </body> </html>
提交重置代码
章节
笔记
提问
课件
反馈
捐赠

JQuery 基础入门教程

  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载

一辆想出轨的无轨电车

各种方法各种迷。。。

8年前    添加回复 0

Alway.以为

@橱窗的光 看看你的评论 再看看课程,明白的差不多了

8年前    添加回复 0

学习ing

jQuery是一个合集对象,如果想快速查找合集里面的每一个元素的所有祖辈元素,此时可以用parents()方法

8年前    添加回复 0

橱窗的光

parent只会查找一级,parents则会往上一直查到查找到祖先节点

8年前    添加回复 0

末日的春天

parents():向上找祖宗

8年前    添加回复 0

$( "html" ).parent()方法返回一个包含document的集合,而$( "html" ).parents()返回一个空集合 哪位大神来解释下?

[最新 数据分析师 的回答] $( "html" ).parent()方法返回一个包含document的集合,而$( "html" ).parents()返回一个空集合 哪位大神来解释下?-PHP中文网问答-$( "html" ).parent()方法返回一个包含document的集合,而$( "html" ).parents()返回一个空集合 哪位大神来解释下?-PHP中文网问答围观一下哦,学习一下。

时间:8年前

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~