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.49028c.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.49028c.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>