Last-Modified: 2022/06/18

jQueryで子要素を取得する方法【現役エンジニアが解説】

PROGRAM

今回は、jQueryで子要素を取得する方法について、簡単に解説していきます。

childrenメソッド

例えば、以下のHTMLを想定します。

<ul id="hoge_parent">
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

jQueryのchildrenメソッドでは全ての子要素を取得できます。

$("#hoge_parent").children();

上記のコードでは、hoge_parentのidの要素の全ての子要素(li要素)を取得します。

contentsメソッド

今回は以下のHTMLを想定します。

<div id="hoge_parent">ほげ1<span>ほげ2</span>ほげ3</div>

contentsメソッドではテキストノードを含む全ての子要素を取得します。

$("#hoge_parent").contents();

例えば、上記のコードでは、hoge_parentのidの要素のテキストノードを含む全ての子要素(3つ)を取得します。

findメソッド

以下のHTMLを想定します。

<div id="hoge_parent">
  <div id="hoge_child">
    <div id="hoge_grand_child">
  </div>
</div>

findメソッドでは全ての子孫要素を取得します。

$("#hoge_parent").find();

上記のコードの例では、hoge_parentのidの要素の全ての子孫要素(hoge_childとhoge_grand_childのidの要素)を取得します。

• facebook
• Tweet
• Read Later