Maison > Article > interface Web > Comment obtenir des éléments frères et sœurs avec jQuery ? (exemple de code)
Le contenu de cet article explique comment jQuery obtient les éléments frères et sœurs ? (Exemple de code) a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.
① $(this).next(); Ce qui est obtenu est l'élément frère suivant de l'élément actuel
②$(this).nextAll(); est l'élément actuel Tous les éléments frères derrière
③$(this).prev(); obtiennent l'élément frère précédent de l'élément actuel
④$(this).prevAll(); Get correspond à tous les éléments frères devant l'élément actuel
⑤$(this).siblings(); Ce qui est obtenu, ce sont tous les éléments frères de l'élément actuel (sauf lui-même)
Exercice de cas :
Analyse des exigences : Lorsque la souris saisit du texte, l'arrière-plan du texte actuel devient rouge. Lorsque vous cliquez dessus, la couleur d'arrière-plan du texte devant le texte actuel devient jaune et la couleur d'arrière-plan. du texte derrière devient bleu. Lorsque la souris sort, toutes les couleurs de fond Annulent l'effet
:
Le code est le suivant :
<!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>
Remarque : les lignes 49 et 50 du code ci-dessus peuvent être compressées en une seule ligne, introduisant ainsi une nouvelle méthode
end() ; qui sert à restaurer la chaîne courte.
Deux lignes de code originales :
$(this).prevAll().css("backgroundColor","yellow"); $(this).nextAll().css("backgroundColor","blue");
Code modifié :
$(this).prevAll().css("backgroundColor","yellow").end().nextAll().css("backgroundColor","blue");
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!