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

简介: 快速学习 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 标签都不会有。演示效果如下:

图片57.png

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 的元素被添加上背景颜色。

演示效果如下:

图片58.png

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");

这里参数表示从哪里开始停止匹配接下来的同级元素。

演示效果:

图片59.png

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。

演示效果如下:

图片60.png

Term1 Term3 之间的所有的 dd 标签都被添加上了绿色的字体颜色。

相关文章
|
1月前
|
JavaScript
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
59 2
|
2月前
|
JavaScript
jQuery 遍历 方法
jQuery 遍历 方法
32 5
|
2月前
|
JavaScript
jQuery 遍历
jQuery 遍历
31 1
jQuery 遍历
|
2月前
|
JavaScript
jQuery 遍历 - 同胞(siblings)
jQuery 遍历 - 同胞(siblings)
23 6
|
2月前
|
JavaScript
jQuery 遍历 - 祖先
jQuery 遍历 - 祖先
34 5
|
2月前
|
JavaScript
jQuery 遍历- 过滤
jQuery 遍历- 过滤
18 2
|
2月前
|
JavaScript
jQuery 遍历 方法
jQuery 遍历 方法
24 3
|
2月前
|
JavaScript
jQuery 遍历 - 祖先
jQuery 遍历 - 祖先
17 4
|
2月前
|
JavaScript
jQuery 遍历 - 同胞(siblings)
jQuery 遍历 - 同胞(siblings)
19 2
|
2月前
|
JavaScript
jQuery 遍历 - 后代
jQuery 遍历 - 后代
16 2