开发者学堂课程【jQuery 开发教程:jQuery 遍历_树遍历2】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/362/detail/4304
jQuery 遍历_树遍历2
目录
一、具体方法
二、演示
一、 具体方法
1、.next():
取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器,那么只有紧跟着的兄弟元素满足选择器时,才会返回此元素。
2、.nextAll():
获得每个匹配元素集合中所有下面的同辈元素,选择性筛选的选择器。.nextAll() 与.next() 的区别,.next()只取得紧邻的后面同辈元素而.nextAll() 是选择所有下面的同辈元素。
3、.nextUntil():
通过选择器, DOM 节点,或 jQuery 对象得到每个元素之后的所有兄弟元素,但不包括匹配的元素。
二、 演示
1、.next 演示
<p>p1</p> <p class="one">p2</p> <p>p3</p> <div>d1</div> <script> $(function() { $("p").next(“div”). css("background-color","yellow");
选择类名为 one 的 p 元素后面紧邻的同辈元素,使用 next 方法,参数是可选的,参数的类型是选择器,如果不添加一个选择器,p3 就成为了筛选结果。如果选择 p 标签的同辈元素,这个同辈元素一定要是 div 的标签。演示结果:只有 div 标签被添加上了黄色的效果,前面的 p 标签都不会有。演示效果如下:
2、.nextAll 演示
<ul class="one"> <li>li 1</li> <li class="two">li 2 <ul class="three"> <li>item 1</li> <li class="inner”>item 2</li> <li>item 3</1i> </ul> </li> <li>li 3<li> <li>li 3<li> <li>li 3<li> </ul> <script> $(function() { $(".two").nextAll.css("background-color","pink");
nextAll 与 next 的参数是相似的,也是一个选择器,如果不写参数,执行效果为 li2 下面所有的同辈元素都被添加上了粉色的背景颜色,但是不包括 li2。
添加参数的状态:
<li>li 3<li> <li>li 3<li> <li>li 3<li> <div>dl<div> <div>dl<div> <div>dl<div> $("li").nextAll(“div”).css("background-color","pink");
选择 li 标签之后的所有的 div 同类元素,只有 div 被添加上了背景颜色。虽然 li 标签后面都是它的同类元素,但是不满足参数的要求是 div,所以只有类型为 div 的元素被添加上背景颜色。
演示效果如下:
3、.nextuntil演示
<dl> <dt id="term-1">d1</dt> <dd>1a</dd> <dd>1b</dd> <dt id="term-2">d2</dt> <dd>2a</dd> <dd>2b</dd> <dt id="term-3">d3</dt> <dd>3a</dd> <dd>3b</dd> </dl>
Nextuntil只有一个参数时,查找 dt id="term-2"
之后的所有的兄弟元素,直到遇到下一个 dt 为止,并将它们的背景颜色设置为红色。既不包含头也不包含尾。
<script> $(function() { $("#term-2").nextUntil("dt").css("background-color","red");
这里参数表示从哪里开始停止匹配接下来的同级元素。
演示效果:
Nextuntil有两个参数时,查找dt id="term-1"
之后 dd 的所有兄弟元素,直到遇到dt id="term-3"
为止,并将文字颜色设置为绿色。
var term3=$("#term-3"); $("#term-1").nextUntil(term3,"dd").css("color","green");
nextUntil 中第一个参数表示要停止的位置,第二个参数表示筛选出的元素这里要停止的位置是 term3 ,要筛选出的元素是 dd。
演示效果如下:
Term1 和 Term3 之间的所有的 dd 标签都被添加上了绿色的字体颜色。