时间:2021-07-01 10:21:17 帮助过:11人阅读
① $(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如何获取兄弟元素?(代码示例)的详细内容,更多请关注Gxl网其它相关文章!