jQuery 同胞


jQuery 遍歷 - 同胞(siblings)

同胞擁有相同的父元素。

透過 jQuery，您能夠在 DOM 樹中遍歷元素的同胞元素。

在DOM 樹中水平遍歷

有許多有用的方法讓我們在DOM 樹進行水平遍歷：

siblings()

#next()

nextAll()

nextUntil()

prev()

prevAll()

prevUntil()

jQuery siblings() 方法

siblings() 方法傳回所有被選元素的同胞元素。

下面的範例回傳<h2> 的所有同胞元素：

#實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings *
{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("h2").siblings().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (父元素)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>

</body>
</html>

執行實例»

點擊"運行實例" 按鈕查看線上實例

您也可以使用可選參數來過濾同胞元素的搜尋。

下面的範例傳回屬於<h2> 的同胞元素的所有<p> 元素：

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings *
{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("h2").siblings("p").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (父元素)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>

</body>
</html>

#運行實例»

點擊"運行實例" 按鈕查看線上實例

# jQuery next() 方法

next() 方法傳回被選元素的下一個同胞元素。

該方法只傳回一個元素。

下面的範例回傳<h2> 的下一個同胞元素：

#實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings *
{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("h2").next().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (父元素)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>

</body>
</html>

運行實例»

點擊"運行實例" 按鈕查看線上實例

#jQuery nextAll() 方法

nextAll() 方法傳回被選元素的所有跟隨的同胞元素。

下面的範例回傳<h2> 的所有跟隨的同胞元素：

#實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings *
{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("h2").nextAll().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (父元素)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>

</body>
</html>

##運行實例» 點擊"運行實例" 按鈕查看線上實例

jQuery nextUntil() 方法

##nextUntil() 方法傳回介於兩個給定參數之間的所有跟隨的同胞元素。

下面的範例傳回介於<h2> 與<h6> 元素之間的所有同胞元素：

實例

##
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings *
{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">

<div>div (父元素)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
  <h5>h5</h5>
  <h6>h6</h6>
  <p>p</p>
</div>

</body>
</html>

運行實例»
點擊"運行實例"按鈕查看線上實例

#jQuery prev(), prevAll() & prevUntil() 方法##prev(), prevAll() 以及prevUntil() 方法的運作方式與上面的方法類似，只不過方向相反而已：它們返回的是前面的同胞元素（在DOM 樹中沿著同胞元素向後遍歷，而不是向前）。

←
→