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

任务描述

本关任务：用 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>

效果图如下：

siblings()

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

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

效果如下：

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

next()

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

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

效果如下：

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

nextAll()

如何给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>

Andone_hsx

发布了87 篇原创文章 · 获赞 32 · 访问量 9万+

私信关注

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

猜你喜欢