获取兄弟节点的常用方法有:
方法 | 说明 |
siblings() | 选取所有兄弟节点 |
next() | 选取后面兄弟节点 |
nextAll() | 选取所有后面的兄弟节点 |
nextUntil() | 选取所有后面的兄弟节点,但不包含后面指定的节点及指定节点的弟弟……。 |
prev() | 选取前面的兄弟节点 |
prevAll() | 选取所有前面的兄弟节点 |
prevUntil() | 选取所有前面的兄弟节点,但不包含后面指定的节点及指定节点的哥哥……。 |
获取所有兄弟节点
使用方法siblings()
示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html> < html >
< head >
< meta charset = "UTF-8" >
< title >兄弟节点</ title >
< style >
.box{
border: 1px solid blueviolet;
padding: 1px;
margin-bottom: 12px;
}
</ style >
</ head >
< body >
< div >
< ul id = "ul" >
< li id = "a" >油条</ li >
< li id = "b" >包子</ li >
< li id = "c" >米饺</ li >
< li id = "d" >< a >鱼粉</ a ></ li >
</ ul >
</ div >
< script >
$('#c').siblings().attr("class", "box");
</ script >
</ body >
</ html >
|
获取下个兄弟节点
使用方法next()
示例:
1
|
$( '#c' ).next().attr( "class" , "box" );
|
获取所有后面的兄弟节点
使用方法nextAll()
示例:
1
|
$( '#a' ).nextAll().attr( "class" , "box" );
|
获取所有前面的兄弟节点
$(
'#a'
).prevAll().attr(
"class"
,
"box"
);
取所有后面的节点,但不包含其中的一个。
$(
'#c'
).nextUntil().attr(
"class"
,
"box"
);