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

水深无声 2022-04-05 14:00 345阅读 0赞

--------------------

任务描述

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

![206880][]

相关知识

为了完成本关任务，你需要掌握：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>`

效果图如下：

![206779][]

siblings()

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

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

效果如下：  
![206781][]

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

next()

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

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

效果如下：  
![206782][]

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

nextAll()

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

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

效果如下：  
![206783][]

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

prev() 和 prevAll()

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

编程要求

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

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

格式注意：

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

效果如下：

![206879][]

<!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>

[206880]: https://educoder.trustie.net/attachments/download/206880
[206779]: https://educoder.trustie.net/attachments/download/206779
[206781]: https://educoder.trustie.net/attachments/download/206781
[206782]: https://educoder.trustie.net/attachments/download/206782
[206783]: https://educoder.trustie.net/attachments/download/206783
[206879]: https://educoder.trustie.net/attachments/download/206879