jQuery——遍历DOM元素的兄弟元素

---

任务描述

本关任务：用 jQuery 遍历 DOM 元素的兄弟元素。效果如下：

相关知识

为了完成本关任务，你需要掌握：1.siblings()，2. next() ， nextAll() 3. prev() ，prevAll()。

基本的html结构如下（CSS已省略）：

2. p元素

3. sapn元素

4. h3元素

5. ul元素
6. ol元素

效果图如下：

siblings()

如何给span元素的所有兄弟元素设置背景色呢？ 这里用siblings()。代码如下：

1. $("span").siblings().css("background","orange")

效果如下：

从上面可以看出：siblings() 方法会返回被选元素的所有兄弟元素

next()

如何给span元素的后一个兄弟元素设置背景色呢？ 这里用next()。代码如下：

1. $("span").next().css("background","orange")

效果如下：

从上面可以看出：next() 方法会返回被选元素的后一个兄弟元素

nextAll()

如何给span元素后的所有兄弟元素设置背景色呢？ 这里用nextAll()。代码如下：

1. $("span").nextAll().css("background","orange")

效果如下：

从上面可以看出：next() 方法会返回被选元素后的所有兄弟元素。

prev() 和 prevAll()

prev()和next()相对应，它返回的是被选元素的前一个兄弟元素。
prevAll()和nextAll()相对应，它返回的是被选元素前的所有兄弟元素。

编程要求

在右侧编辑器Begin至End之间填充代码，遍历class="item"元素的兄弟元素。要求如下：

• 这里只用siblings(), pre(), prevAll(), next() 来实现下面效果；
• 设置p元素的颜色为red；
• 设置span元素的颜色为orange；
• 设置ul元素的颜色为green；
• 设置ol元素的颜色为cyan；

格式注意：

• 获取元素统一用类名获取；
• 统一用双引号""表示字符串；

效果如下：

    
    
    

    



    
p元素
    sapn元素
    
h3元素
    
ul元素
    
ol元素