jQuery中的siblings()的用法

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>

效果

image.png

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>

效果

image.png

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容