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

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

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

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

HTML

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

jQuery

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

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

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

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

HTML

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

jQuery

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

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

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

HTML

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

jQuery

$("#parent p");

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

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

HTML

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

最初(jQuery)

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

最後(jQuery)

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

2番目(jQuery)

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

イベント

2017/12/05(火)
Design Thinking Square