作者:圣换少爷 | 来源:互联网 | 2020-08-07 00:11
本篇文章给大家带来的内容是关于jQuery如何获取兄弟元素?(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
① $(this).next(); 获取的是当前元素的下一个兄弟元素
②$(this).nextAll(); 获取的是当前元素的后面的所有的兄弟元素
③$(this).prev(); 获取的是当前元素的前一个兄弟元素
④$(this).prevAll(); 获取的是当前元素的前面的所有的兄弟元素
⑤$(this).siblings(); 获取的是当前元素的所有的兄弟元素(自己除外)
案例练习:
需求分析:鼠标进入文字,当前文字背景变红色,当点击时候,当前文字前面文字背景颜色变为黄色,后面文字背景颜色变为蓝色,当鼠标移出时,所有背景颜色取消
效果:
代码如下:
- 青岛啤酒(TsingTao)
- 瓦伦丁(Wurenbacher)
- 雪花(SNOW)
- 奥丁格教士(Franziskaner)
- 科罗娜喜力柏龙(Paulaner)
- 嘉士伯Kaiserdom
- 罗斯福(Rochefort)
- 粉象(Delirium)
- 爱士堡(Eichbaum)
- 哈尔滨牌蓝带
注意: 上述代码第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社区 其它相关文章!