jQuery獲取兄弟元素的方法

發(fā)布時(shí)間：2020-08-27 14:43:20 來源：億速云閱讀：355 作者：小新欄目：web開發(fā)

小編給大家分享一下jQuery獲取兄弟元素的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

① $(this).next()；獲取的是當(dāng)前元素的下一個(gè)兄弟元素

②$(this).nextAll(); 獲取的是當(dāng)前元素的后面的所有的兄弟元素

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

④$(this).prevAll(); 獲取的是當(dāng)前元素的前面的所有的兄弟元素

⑤$(this).siblings(); 獲取的是當(dāng)前元素的所有的兄弟元素(自己除外)

案例練習(xí)：

需求分析：鼠標(biāo)進(jìn)入文字，當(dāng)前文字背景變紅色，當(dāng)點(diǎn)擊時(shí)候，當(dāng)前文字前面文字背景顏色變?yōu)辄S色，后面文字背景顏色變?yōu)樗{(lán)色，當(dāng)鼠標(biāo)移出時(shí)，所有背景顏色取消

效果：

jQuery獲取兄弟元素的方法

代碼如下：

<!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,有鼠標(biāo)進(jìn)入事件,鼠標(biāo)離開事件,點(diǎn)擊事件
//         $(function () {
//             //獲取ul->li
//             $("ul>li").mouseenter(function () {
//                 $(this).css("backgroundColor","red").siblings().css("backgroundColor","");
//             }).mouseleave(function () {
//                 $(this).css("backgroundColor","").siblings().css("backgroundColor","");
//             }).click(function () {
//                 //當(dāng)前元素前面的所有兄弟元素背景顏色為黃色
//                 //$(this).prevAll().css("backgroundColor","yellow");
//                 //當(dāng)前元素后面的所有兄弟元素背景顏色為藍(lán)色
//                 //$(this).nextAll().css("backgroundColor","blue");
// 
//                 //鏈?zhǔn)骄幊檀a
//                 //斷鏈:對(duì)象調(diào)用方法,返回的不是當(dāng)前的對(duì)象,再調(diào)用方法,調(diào)用不了,
//                 //解決斷鏈--->恢復(fù)到斷鏈之前的一個(gè)效果--修復(fù)斷鏈
//                 //.end()方法恢復(fù)到斷鏈之前的效果
//                 $(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");
//             });
//         });

            $(function(){
                //鏈?zhǔn)骄幊? 鼠標(biāo)進(jìn)入--鼠標(biāo)點(diǎn)擊--鼠標(biāo)移出
                //$("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>瓦倫?。╓urenbacher）</li>
    <li>雪花（SNOW）</li>
    <li>奧丁格教士（Franziskaner）</li>
    <li>科羅娜喜力柏龍（Paulaner）</li>
    <li>嘉士伯Kaiserdom</li>
    <li>羅斯福（Rochefort）</li>
    <li>粉象（Delirium）</li>
    <li>愛士堡（Eichbaum）</li>
    <li>哈爾濱牌藍(lán)帶</li>
</ul>

</body>
</html>

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

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

原來兩行代碼：

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

修改后代碼：

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

以上是jQuery獲取兄弟元素的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

jQuery獲取兄弟元素的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽