jQuery 遍历 - siblings() 方法

最新推荐文章于 2023-07-25 09:00:32 发布

原创最新推荐文章于 2023-07-25 09:00:32 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了两种使用jQuery改变HTML列表中指定元素的兄弟元素背景颜色的方法。第一种方法仅针对拥有特定类名的兄弟元素；第二种方法则会改变所有兄弟元素的颜色。

第一种方法

js代码：

<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
          $(document).ready(function(){
            $('.nav li.two').siblings(".nav li.one").css('background-color', '#B60000'); //除了数字1背景变为红色，其他的颜色不变
      	})       
	</script>

css 代码：

<style type="text/css">
   li{list-style: none;}
   .nav{ height: 60px;width: 20px;}
   .nav li{line-height: 1.6; width: 20px}
	</style>

html代码：

<ul class="nav">
      <li class="one">1</li>
      <li class="two">2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
   </ul>

显示效果为：

第二种方法：

js 代码

	<script type="text/javascript">
     $(document).ready(function(){
         $('.nav li.two').siblings().css('background-color', '#B60000'); //除了这个背景颜色不变为红色 数字1345都变为红色     
      })      
	</script>

html 代码：

   <ul class="nav">
      <li >1</li>
      <li class="two">2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
   </ul>

显示效果：

区别：html代码中第一个只是在一上面加了一个class属性 class="one"