siblings()用于查找当前元素的同胞元素,就是拿到当前元素的兄弟节点(不包括自己)。
给当前元素设置新的样式,并删除当前元素的同胞元素的样式:
$(this).addClass("active").siblings().removeClass("active");
siblings()用法1
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script>
// 第三个标签为蓝色。第一,二,四,五个标签为红色
$('li.third-item').css('background-color', 'blue').siblings().css('background-color', 'red');
</script>
</body>
</html>
效果
siblings()用法2
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script>
// 为 除了自己外的其他同胞元素,设置css样式。
// 第一,二,四,五个标签为红色。而自己不设置样式。
$('li.third-item').siblings().css('background-color', 'red');
</script>
</body>
</html>