小编给大家分享一下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获取兄弟元素的方法的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
