jQuery中siblings()方法用法实例

2024-05-06 16:13:57

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了jQuery中siblings()方法用法,实例分析了siblings()方法的功能、定义及获取匹配元素集合中每一个元素的同辈元素的使用技巧,是进行元素筛选时非常实用的方法,需要的朋友可以参考下

本文实例讲述了jQuery中siblings()方法用法。分享给大家供大家参考。具体分析如下：

此方法能够获取匹配元素集合中每一个元素的同辈元素。
同辈元素集合可以使用表达式进行筛选。

语法结构:

复制代码代码如下:

$(selector).siblings(expr)

参数列表:

参数	描述
expr	可选。用于筛选同辈元素的表达式。

实例代码:

实例一:

复制代码代码如下:

		
		<!DOCTYPE html>
		<html>
		<head>
		<meta charset=" utf-8">
		<meta name="author" content="http://www.vevb.com/" />
		<title>siblings()函数-武林网</title>
		<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
		<script type="text/javascript"> 
		$(document).ready(function(){ 
		  $("p").siblings().css("color","red") 
		}) 
		</script> 
		</head> 
		<body> 
		<div class="first"> 
		  <p>我是first下的p</p> 
		  <span>我是div下的span</span> 
		</div> 
		<div class="second"> 
		  <ul> 
		    <li>我是li</li> 
		  </ul> 
		  <p>我是second下的p</p> 
		</div> 
		</body> 
		</html>

实例二:

复制代码代码如下:

		
		<!DOCTYPE html>
		<html>
		<head>
		<meta charset=" utf-8">
		<meta name="author" content="http://www.vevb.com/" />
		<title>siblings()函数-武林网</title>
		<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
		<script type="text/javascript"> 
		$(document).ready(function(){ 
		  $("p").siblings("span").css("color","red") 
		}) 
		</script> 
		</head> 
		<body> 
		<div class="first"> 
		  <p>我是first下的p</p> 
		  <span>我是div下的span</span>  
		</div> 
		<div class="second"> 
		  <ul> 
		    <li>我是li</li> 
		  </ul> 
		  <p>我是second下的p</p> 
		</div> 
		</body> 
		</html>