childrenとは
- ここで説明する children とは次の語句からなるjQueryのメソッドです。
- children
- 読み: チルドレン
意味: 子供、子の複数形
childrenメソッドの概要
このメソッドは、呼び出し元要素の子要素を取得します。
メソッドの引数が空の場合は、全ての子要素を取得します。 また、引数にセレクターを与えた場合、セレクターにマッチした子要素のみを取得します。
構文
サンプルを見る前に構文を確認しておきます。
var elmChildren = $(Selector).children([Selector]);サンプルコードと実行結果
ここでは、div 要素を親として、子要素に b と span を用意しました。
div を呼び出し元要素として、children("b") で子要素の b要素だけを取得し、cssメソッドで背景色をライトピンクに設定します。
サンプルコード: CSS
<style>
b, span, button{
display: block;
border: thin solid currentColor;
margin: 8px;
padding: 8px;
}
</style>
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div>
<b>element b</b>
< span>element span< /span>
<b>element b</b>
< span>element span< /span>
<b>element b</b>
</div>
<script>...</script>
</body>
- 06-12: div (div要素です。これが親要素になります。)
- 07, 09, 11: b (b要素です。div の子要素です。)
- 08, 10: span (span要素です。div の子要素です。)
サンプルコード: script
<script>
$("#idButton").click(function(){
$("div").children("b").css("background-color","##lightpink");
});
</script>
- 02-04: $("#idButton").click(function(){処理}) (id="idButton" の要素がクリックされると 処理 を実行します。)
- 03: $("div").children("b") (呼び出し元が div であり、その子要素である b を取得しています。これに続く css メソッドでスタイルを設定します。)
element b
element span
element b
element span
element b