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

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

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

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

テキスト1

テキスト2

テキスト3

jQuery
$("#parent").children('img');
なおchildren()メソッドでは、孫要素は取得されません。

全ての子孫要素から取得する.find()

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

テキスト1

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

セレクタを使って子要素を取得する

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

テキスト1

テキスト2

テキスト3

jQuery
$("#parent p");

子要素のn番目の要素を指定

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

テキスト1

テキスト2

テキスト3

最初(jQuery)
$("#parent p:first").css("color", "red");
最後(jQuery)
$("#parent p:last").css("color", "red");
2番目(jQuery)
$("#parent p:nth-child(2)").css("color", "red");