jQuery如何取得兄弟元素？（程式碼範例）-js教程-PHP中文網

jQuery如何取得兄弟元素？（程式碼範例）

不言

發布： 2019-01-18 10:50:53

轉載

2186 人瀏覽過

本篇文章帶給大家的內容是關於jQuery如何取得兄弟元素？（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

① $(this).next()；取得的是下一個元素的下一個兄弟元素

②$(this).nextAll(); 所獲得的是目前元素的後面所有的兄弟元素

③$(this).prev(); 獲取的是當前元素的前一個兄弟元素

④$(this).prevAll(); 的是目前元素的前面所有的兄弟元素

⑤$(this).siblings(); 取得的是目前元素的所有的兄弟元素(自己除外)

案例練習：

需求分析：滑鼠進入文字，當前文字背景變紅色，點擊時候，當前文字前面文字背景顏色變為黃色，後面文字背景顏色變為藍色，當滑鼠移出時，所有背景顏色取消

效果：

程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            list-style-type: none;
            width: 200px;
            margin: 100px auto;
        }

        ul li {
            margin-top: 10px;
            cursor: pointer;
            text-align: center;
            font-size: 20px;
        }
    </style>
    <script src="js/jquery-1.12.2.js" type="text/javascript" charset="utf-8"></script>
    <script>
        //获取ul中所有的li,有鼠标进入事件,鼠标离开事件,点击事件
//         $(function () {
//             //获取ul->li
//             $("ul>li").mouseenter(function () {
//                 $(this).css("backgroundColor","red").siblings().css("backgroundColor","");
//             }).mouseleave(function () {
//                 $(this).css("backgroundColor","").siblings().css("backgroundColor","");
//             }).click(function () {
//                 //当前元素前面的所有兄弟元素背景颜色为黄色
//                 //$(this).prevAll().css("backgroundColor","yellow");
//                 //当前元素后面的所有兄弟元素背景颜色为蓝色
//                 //$(this).nextAll().css("backgroundColor","blue");
// 
//                 //链式编程代码
//                 //断链:对象调用方法,返回的不是当前的对象,再调用方法,调用不了,
//                 //解决断链--->恢复到断链之前的一个效果--修复断链
//                 //.end()方法恢复到断链之前的效果
//                 $(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");
//             });
//         });

            $(function(){
                //链式编程  鼠标进入--鼠标点击--鼠标移出
                //$("ul>li").mouseover().click().mouseout();
                $("ul>li").mouseover(function(){
                    $(this).css("backgroundColor","red").siblings("li").css("backgroundColor","");
                }).click(function(){
                    $(this).prevAll().css("backgroundColor","yellow");
                    $(this).nextAll().css("backgroundColor","blue");
                }).mouseout(function(){
                    $("ul>li").css("backgroundColor","");
                });
            });
    </script>
</head>
<body>
<ul>
    <li>青岛啤酒（TsingTao）</li>
    <li>瓦伦丁（Wurenbacher）</li>
    <li>雪花（SNOW）</li>
    <li>奥丁格教士（Franziskaner）</li>
    <li>科罗娜喜力柏龙（Paulaner）</li>
    <li>嘉士伯Kaiserdom</li>
    <li>罗斯福（Rochefort）</li>
    <li>粉象（Delirium）</li>
    <li>爱士堡（Eichbaum）</li>
    <li>哈尔滨牌蓝带</li>
</ul>

</body>
</html>

登入後複製

注意：上述程式碼第49、50行可以壓縮成一行，這樣就引入了一個新的方法

end()；作用是恢復短鏈。

原來兩行程式碼：

$(this).prevAll().css("backgroundColor","yellow");
$(this).nextAll().css("backgroundColor","blue");

登入後複製

修改後程式碼：

 $(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");

登入後複製

以上是jQuery如何取得兄弟元素？（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

jQuery如何取得兄弟元素？（程式碼範例）

jQuery如何取得兄弟元素？ （程式碼範例）

jQuery如何取得兄弟元素？（程式碼範例）