jQuery遍历之parents()方法，jQuery基础(二)

第1章课程介绍
视频：1-1 jQuery基础(二)—DOM...(01:31)

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()返回一个空集合。

具体的操作，请参考右边的代码

任务

请在右边代码区域的第75行填入任务代码

找到class="item-b"元素的所有祖辈元素
并且附上一个红色的边框

?不会了怎么办: $('.item-b').parents().css('border', '2px solid red')

index.html

1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

提交

自动运行

重置代码

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

问答
评论
笔记
代码

全部精华我要发布

$(".item-b").parents(".div",".first-div").css("border","1px solid red");???

已采纳回答 / twelvesummer

$(".item-b").parents(".div",".first-div").css("border","1px solid red");$(".item-b").parents先返回class=item-b元素集合的所有祖先元素，筛选那些class=div的祖先元素设置红边，parents()，只有一个可选参数，这里应该只默认用了第一个参数“.div"

2 回答 1583 浏览

2018-03-20

究竟是哪儿个父辈元素,有点混乱

已采纳回答 / 慕设计2737431

最顶层的div，h2标签下面这个，jquery.parents()找到的是当前元素所有的父类元素，如果没有参数限制，会找到根元素，将所有符合条件的元素放入一个集合里。这个父类div 有一个class 属性.first-div，所以会筛选到这个class的div 并返回。<h2>parents方法()</h2><div class="left first-div">

2 回答 1343 浏览

2018-01-19

上面注意事项中$( "html" ).parents()返回一个空集合，不是应该会返回document吗，难道它的父元素不属于它的祖辈范围之内？

已采纳回答 / 慕莱坞9527

记住就好了，又不常用

6 回答 1958 浏览

2022-03-25

.left div这个是什么意思呢

最新回答 / 慕莱坞9527

选择 class="left" 的元素中标签为<div>的元素

2 回答 860 浏览

2017-10-20

前面 $('.item-b').parents 就相当于获得了.item-b 的所有祖辈元素并形成一个集合，后面（）中的参数相当于在这个集合里再做操作，你看，要是输入:contains('B')的话，因为这个集合里是没有它的，所以和（空）是一个效果【因为'.item-b'和:contains('B')代表的是一个节点0.0]】，如果换成 :last，就会得到集合里的最后一个值，并在它上面操作【框一个（是html？）】，你还可以试试 lt或者eq().

2 回答 1748 浏览

2017-08-23

.parents()方法参数问题

已采纳回答 / 兔子蹦啊蹦

我的理解是 li.item-b元素中有B 但是它往上所有的父元素都包含这个元素所以查找出了li.item-b往上的所有的元素把color换成边框更清晰可见一点

3 回答 1756 浏览

2017-09-19

parents()无参数????

最赞回答 / Mr_Jp黎

parents()找祖宗啊，$('.item-b')是li，li他爸是<ul class="level-2">，他爷爷是<div class="div">，他姥爷是<div class="left first-div">，他姥爷有兄弟h2和两个button，不算是他的祖宗。直系祖宗加上红框。

2 回答 953 浏览

2017-11-29

parents()方法会查每一个元素的所有祖辈元素？

已采纳回答 / 管管0_0

$('p').parents()寻找的是该p元素的所有父辈元素，每个父辈元素都有个框

1 回答 1018 浏览

2017-03-22

这句话是为什么呢

已采纳回答 / 钰与宸

.parents()，返回的是所有祖辈元素，从最近的父级元素开始，一路向上直到根元素<html>（这是jQuery方法本身就这么定的，详细你可以去看它的源码），所以搜索到html就完了，不会再有html的祖辈（父）元素，所以$( "html" ).parents() 返回一个空集合。而.parent()则没有这样的要求，它只是在DOM树上搜索其父级元素，所以对html，搜索到其父级元素是document，所以$( "html" ).parent()方法返回一个包含document的集合。学习...

2 回答 920 浏览

2018-09-20