この記事の内容は、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>
$(this).prevAll().css("backgroundColor","yellow"); $(this).nextAll().css("backgroundColor","blue");
$(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");
以上がjQueryで兄弟要素を取得するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。