2017/8/3更新

jQueryで子要素を取得する方法：children(), find()

今回は、jQueryで子要素を取得する方法を３つに分けて説明します。

直下の子要素を取得する.children()

要素内の全ての子要素を取得します。children('セレクタ')のように、セレクタを引数に渡すことで子要素を絞り込むこともできます。（例１）#parentの子要素の中から、imgタグのみ取得する

HTML

<div id="parent">
  <p>テキスト1</p>
  <p>テキスト2</p>
  <p>テキスト3</p>
<img src="sample.png" /></div>

jQuery

$("#parent").children('img');

1	$("#parent").children('img');

なおchildren()メソッドでは、孫要素は取得されません。

children()では、取得できるのは直下の子要素のみでしたが、find()では子要素の子要素も含む全ての子孫要素から条件を指定して取得できます。（例２）#parentの子要素の中から.child-imageを取得する

HTML

<div id="parent">
  <p>テキスト1</p>
  <div id="child"><img class="child-image" src="sample.png" /></div>
</div>

</div>

jQuery

$("#parent").find('.child-image');

1	$("#parent").find('.child-image');

またメソッドではなく、シンプルにセレクタを使って指定することもできます。

HTML

<div id="parent">
  <p>テキスト1</p>
  <p>テキスト2</p>
  <p>テキスト3</p>
</div>

</div>

jQuery

$("#parent p");

1	$("#parent p");

最初の子要素、最後の子要素、2番目の子要素など指定することができます。指定の仕方は、CSSのセレクタと似ています。

HTML

<div id="parent">
  <p>テキスト1</p>
  <p>テキスト2</p>
  <p>テキスト3</p>
</div>

</div>

最初（jQuery）

$("#parent p:first").css("color", "red");

1	$("#parent p:first").css("color", "red");

最後（jQuery）

$("#parent p:last").css("color", "red");

1	$("#parent p:last").css("color", "red");

2番目（jQuery）

$("#parent p:nth-child(2)").css("color", "red");

1	$("#parent p:nth-child(2)").css("color", "red");

HTML jQuery