因为jQuery具备隐式迭代，所以在写排他思想的时候不需要循环遍历，直接用下面这个就能实现。
<html>
<button>变色</button>
<button>变色</button>
<button>变色</button>
<button>变色</button>
</html>
<script>
$('button').click(function(){
$(this).css('background','blue')
// 除了本身这个的同级元素
$(this).siblings("button").css('background','')
})
</script>小案例：
鼠标移到左边的任意一个盒子，右边盒子照片会对应变化。
<style>
.content{
display: flex;
}
.left{
list-style: none;
}
.left li{
width: 60px;
height: 80px;
line-height: 80px;
text-align: center;
border: 1px solid;
color: #fff;
background-color: pink;
}
.right{
margin-top: 20px;
height: 240px;
width: 240px;
position: relative;
}
img{
height: 240px;
width: 240px;
}
.right div{
position: absolute;
}
</style>
<html>
<div class="content">
<ul class="left">
<li>曲奇</li>
<li>气球</li>
<li>野餐</li>
</ul>
<div class="right">
<div><img src="1.jpg" alt=""></div>
<div><img src="2.jpg" alt=""></div>
<div><img src="3.jpg" alt=""></div>
</div>
</div>
</html>
<script>
$('.left li').mouseover(function(){
$(this).css('background','red')
$(this).siblings().css('background','')
// 获得左边li的索引号
var index = $(this).index()
$('.right div').eq(index).show()
$('.right div').eq(index).siblings().hide()
})
</script>