jQuery 遍历_树遍历3|学习笔记

开发者学堂课程【jQuery 开发教程：jQuery 遍历_树遍历3】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/362/detail/4305

jQuery 遍历_树遍历3

目录

一、 具体方法

二、 演示

一、 具体方法

1、.parent()：

取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器。与 children 方法是类似的，区别是一个选择子元素，一个选择父元素。同样，它们的方法以及参数也是相似的。

2、.parents()：

获得集合中每个匹配元素的祖先元素，可以提供一个可选的选择器作为参数。.parent()方法只能返回一级父元素，.parents()方法可以返回所有的祖先元素。

3、.offsetParent()：

取得离指定元素最近的含有定位信息的祖先元素。含有定位信息的元素指的是，CSS 的 position 属性是 relative, absolute, 或 fixed 的元素。这个方法的用处是对于计算元素的位置非常方便，计算位置可以帮助实现动画，或者是将元素放在特定的位置。这个方法不接受任何参数。

4、.parentsUntil()：

查找当前元素的所有的前辈元素，直到遇到选择器，DOM 节点或 jQuery 对象匹配的元素为止，但不包括这些元素。

此方法与.nextuntil是相似的，以及参数用法等都相似。

二、演示

1、.parent() 方法演示

此时获得 ul class="three" 的父元素，并为父元素添加一个边框的效果。

<ul class="one'">
<li>li 1</li>
<li class="two">li 2
<ul class="three">
<1i>item 1</li>
<li class="inner">item 2</li>
<li item 3</li>
</ul>
</Li>
<li>li3</1i>
<Li>1i 3</1i>
<li>li3</li>
<li>li3</li>
<div>d1</div>
<div>d1</div>
<div>d1</div>
<div>d1</div>
<div>d1</div>
</ul>
<script>
$(function() {
$(".three").parent).css("border","1px solid green");

Parent 的参数可写可不写，如果不写表示返回它的直接父元素。

演示效果如下：

如果要选择 li 标签的父级元素，但是要求它的父级元素为 ul 类型，则书写为$(".li").parent（”ul”).css("border","1px solid green");演示结果如下：

2、.parents()方法演示

$(function() {
Console.log($(“.three”).parents())

如果不写参数则会返回所有的祖先元素，如果Parents加参数则会进行筛选。

例如Console.log($(“.three”).parents(“ul”))表示只返回类型为 ul 的祖先元素。

3、.offsetParent()方法演示

ul class="one'"style=“position：absolute”>
<li>li 1</li>
<li class="two"style=”position:relative”>li 2
<ul class="three">
<1i>item 1</li>
<li class="inner">item 2</li>
<li item 3</li>
</ul>
</Li>
<li>li 3</1i>
<Li>1i 3</1i>
<li>li 3</li>
<li>li 3</li>
<div>d1</div>
<div>d1</div>
<div>d1</div>
<div>d1</div>
<div>d1</div>
</ul>
<script>
$(function() {
Console.log($(“.inner”).offsetparent());

要返回离 class="inner" 的 li 标签的最近的含有定位信息的祖先元素。此时返回的应该是 class="two" 这个 li 标签。

4、.parentsUntil方法演示

<div class="c1">
<ul class="c2">
<li class="c3">li 1
<ul class="c4">
<li> item 1/li>
<li> item 2</li>
<li> item 3</li>
</ul>
</li>
<li> li 2</li>
<li> li 3</li>
</ul>
</div>
<script>
$(function() {
Console.log($(“.c4”).parentsUntil())

此时要获得class="c4" 的所有的前缀元素，parentsUntil()中参数有两种情况，第一种情况是一个参数用于确定匹配到哪个前缀元素时停止匹配，第二种情况是两个参数，第二个参数用于过滤匹配的元素。

Console.log($(“.c4”).parentsUntil(“.c2”));表示匹配到 c2 就停止，Console.log($(“.c4”).parentsUntil(“.c1”,”ul”))

表示只是返回类型为 ul 的标签。