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

开发者学堂课程【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 标签都被添加上了绿色的字体颜色。