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