番号指定による子要素の参照

$('child_elements:nth-child(n)').method();

child_elementsに疑似クラスnth-child(n)を適用してn番目の要素に対してmethod()を適用する。child-elementsは複数の子要素の親要素ではなく、子要素である点に注意。たとえばul li要素の場合、childe_elementsはulではなくliになる。

child-elementsは、親要素・子要素のセットでも書ける。たとえば<p id=”parent">要素の子要素に複数の<span>要素がある場合、次のように書ける。

$('#parent span')

さらにこれらの子要素のうちn番目を操作したいときは疑似クラス:nth-child(n)をつけるが、n以外は文字列となるため、文字列と数値の結合かテンプレートリテラルを使う。

$('#parent span:nth-child(' + n + ')')
$(`#parent span:nth-child(${n})`)

全ての子要素の参照

ある親要素の子要素全てを参照したり操作したりしたい場合、children()メソッドを使う。この場合は疑似クラスの:nth-child()と違って、親要素に対してメソッドを実行する。

$('parent_element').children().method()