遍历DOM树，获取所有兄弟节点

2021-09-16 23:50:00

获取兄弟节点的常用方法有：

方法	说明
siblings()	选取所有兄弟节点
next()	选取后面兄弟节点
nextAll()	选取所有后面的兄弟节点
nextUntil()	选取所有后面的兄弟节点，但不包含后面指定的节点及指定节点的弟弟……。
prev()	选取前面的兄弟节点
prevAll()	选取所有前面的兄弟节点
prevUntil()	选取所有前面的兄弟节点，但不包含后面指定的节点及指定节点的哥哥……。

使用方法siblings()

示例：

<!DOCTYPE html>

html

head

meta

charset

"UTF-8"

title

>兄弟节点</

title

script

src

"https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"

></

script

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"

><

>鱼粉</

></

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"

);