首頁 >web前端 >js教程 >jQuery如何取得兄弟元素? (程式碼範例)

jQuery如何取得兄弟元素? (程式碼範例)

不言
不言轉載
2019-01-18 10:50:532233瀏覽

本篇文章帶給大家的內容是關於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中文網其他相關文章!

陳述:
本文轉載於:cnblogs.com。如有侵權,請聯絡admin@php.cn刪除