周遊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"

);