jQuery仲間


jQuery Traversal - 兄弟

兄弟は同じ親要素を持ちます。

jQuery を使用すると、DOM ツリー内の要素の兄弟要素をトラバースできます。

DOM ツリーの水平方向のトラバース

DOM ツリーを水平方向にトラバースできる便利なメソッドがたくさんあります:

siblings()

next()

nextAll()

nextUntil()

prev()

prevAll()

prevUntil()

jQuery兄弟()メソッド

siblings()メソッド選択された要素のすべての兄弟を返します。

次の例は、<h2> のすべての兄弟要素を返します:

Instances

<!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>

Run Instance» オンライン インスタンスを表示するには、[Run Instance] ボタンをクリックします

オプションを使用することもできますパラメータを指定して兄弟要素の検索をフィルタリングします。

次の例は、<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() メソッドは、選択された要素の次の兄弟要素を返します。

このメソッドは 1 つの要素のみを返します。

次の例は、<h2> の次の兄弟要素を返します:

Instance

<!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>

Run Instance» [Run Instance] ボタンをクリックしてオンライン インスタンスを表示します

jQuery nextAll() メソッド

nextAll() メソッドは、選択された要素の後続のすべての兄弟要素を返します。

次の例は、<h2> に続くすべての兄弟要素を返します:

Instance

<!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() メソッドは、指定された 2 つのパラメーター間の後続のすべての兄弟要素を返します。

次の例は、<h2>


jQuery prev()、prevAll()、prevUntil() メソッド間のすべての兄弟要素を返します。 ( ) および prevUntil() メソッドは、上記のメソッドと同様に動作しますが、方向が逆です。前の兄弟要素を返します (DOM ツリー内の兄弟要素に沿って前方ではなく後方にトラバースします)。

←
→