Educoder jQuery动画 第3关：jQuery——遍历DOM元素的兄弟元素

任务描述

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

相关知识

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

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

1. <div class="container">
2. <p>p元素</p>
3. <span>sapn元素</span>
4. <h3>h3元素</h3>
5. <ul>ul元素</ul>
6. <ol>ol元素</ol>
7. </div>

效果图如下：

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")

效果如下：

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

prev() 和 prevAll()

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

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