本关任务:用 jQuery 遍历 DOM 元素的兄弟元素。效果如下:
为了完成本关任务,你需要掌握:1.siblings()
,2. next() , nextAll()
3. prev() ,prevAll()
。
基本的html结构如下(CSS已省略):
<div class="container">
<p>p元素</p>
<span>sapn元素</span>
<h3>h3元素</h3>
<ul>ul元素</ul>
<ol>ol元素</ol>
</div>
效果图如下:
如何给span
元素的所有兄弟元素设置背景色呢? 这里用siblings()
。代码如下:
$("span").siblings().css("background","orange")
效果如下:
从上面可以看出:siblings()
方法会返回被选元素的所有兄弟元素
如何给span
元素的后一个兄弟元素设置背景色呢? 这里用next()
。代码如下:
$("span").next().css("background","orange")
效果如下:
从上面可以看出:next()
方法会返回被选元素的后一个兄弟元素
如何给span
元素后的所有兄弟元素设置背景色呢? 这里用nextAll()
。代码如下:
$("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
;
格式注意:
- 获取元素统一用类名获取;
- 统一用双引号
""
表示字符串;
效果如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
.container{
width: 400px;
margin: 20px auto;
}
.container *{
display: block;
border: 2px solid #000;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<div class="container">
<p>p元素</p>
<span>sapn元素</span>
<h3 class="item">h3元素</h3>
<ul>ul元素</ul>
<ol>ol元素</ol>
</div>
<script>
$(function(){
$(".item").css("background","yellow");
//------------ Begin --------------
$(".item").siblings().css("background","cyan");
$(".item").prevAll().css("background","red");
$(".item").prev().css("background","orange");
$(".item").next().css("background","green");
//-------------- End ---------------
})
</script>
</body>
</html>