jQuery トラバーサル - 子孫


jQuery Traversal - 子孫

子孫とは、子、孫、ひ孫などです。

jQuery を使用すると、DOM ツリーをたどって要素の子孫を見つけることができます。

DOM ツリーの下へのトラバース

DOM ツリーの下へのトラバースのための 2 つの jQuery メソッドを次に示します:

children()

find()

jQuery Children() メソッド

children() メソッドは、選択された要素のすべての直接の子要素を返します。

このメソッドは、DOM ツリーを 1 つ下のレベルまでのみ走査します。

次の例は、各 <div> 要素のすべての直接の子要素を返します。また、オプションのパラメーターを使用して、子要素の検索をフィルター処理します。

次の例は、<div> の直接の子であるクラス名「1」を持つすべての <p> 要素を返します:

インスタンス
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{ 
	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(){
	$("div").children().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="descendants" style="width:500px;">div (当前元素) 
  <p>p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p>p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>

</body>
</html>

インスタンスの実行»

「例を実行」ボタンをクリックしますオンラインの例を見るには


jQuery find() メソッド

find() メソッドは、選択された要素の子孫要素を最後の子孫まで返します。

次の例は、<div> の子孫であるすべての <span> 要素を返します:

Instances

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{ 
	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(){
  $("div").children("p.1").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="descendants" style="width:500px;">div (当前元素) 
  <p class="1">p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p class="2">p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>

</body>
</html>
Run Instance»

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

以下の例は、<div> のすべての子孫を返します:

Instances

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{ 
	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(){
  $("div").find("span").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="descendants" style="width:500px;">div (当前元素) 
  <p>p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p>p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>

</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

←
→