获取兄弟节点的常用方法有:
方法 | 说明 |
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"
);