みなさんこんにちは！
今回の記事は、
悩みを抱えた人・children()とfind()の違いってなに？
・contents()ってなんのために使うの？
というお悩みを解決する記事になっています。
・jQueryを使って子要素を取得する方法【4つご紹介します】
・セレクタを使って子要素を取得する方法
・children()/find()/contents()メソッドの使い方とそれぞれの違い
jQueryで子要素を取得する方法
jQueryで子要素を取得するには、以下の4種類の方法があります。
- セレクタを使って取得する
- children()メソッドを使って取得する
- find()メソッドを使って取得する
- contents()メソッドを使って取得する
それぞれ順を追ってご紹介していきます。
セレクタを使って子要素を取得する方法
まず最初にご紹介するのは、セレクタを使って子要素を取得する方法です。
使い方はとてもシンプルで、「$(“”)」の中に取得したいセレクタを記載するだけで大丈夫です。
実装コード
<div id="parent1">
<div id="parent2">
<p id="child1">子要素1</p>
<p id="child2">子要素2</p>
<p id="child3">子要素3</p>
<span id="child4">子要素4</span>
</div>
</div>
<script>
console.log($("#parent1 p"))
</script>出力結果
=> [p#child1, p#child2, p#child3]また、CSSと同じように使用することで、対象となる要素をさらに絞り込むことも可能です。
| 記載例 | 対象要素 |
|---|---|
| $(“#parent > p”) | #parent直下のpタグ |
| $(“#parent p:first”) | #parent配下の最初のpタグ |
| $(“#parent p:last”) | #parent配下の最後のpタグ |
children()メソッドを使って子要素を取得する方法
続いてご紹介するのは、children()メソッドです。
その名前からも想像できる通り、children()メソッドを使用すると、レシーバであるHTML要素の子要素を全て取得することができます。
実装コード
<div id="parent">
<p id="child1">子要素1</p>
<p id="child2">子要素2</p>
<p id="child3">子要素3</p>
<span id="child4">子要素4</span>
</div>
<script>
console.log($("#parent2").children())
</script>出力結果
=> [p#child1, p#child2, p#child3, span#child4]このように、取得したHTML要素の子要素が簡単に取得することができます。
また、引数にセレクタを指定することで、対象となる子要素を絞り込むこともできます。
実装コード
<div id="parent">
<p id="child1">子要素1</p>
<p id="child2">子要素2</p>
<p id="child3">子要素3</p>
<span id="child4">子要素4</span>
</div>
<script>
console.log($("#parent").children("span"))
</script>出力結果
=> [span#child4]children()メソッドを使用する際の注意点
こちらのchildren()メソッドですが、一つだけ注意点があります。
それは、取得できるのは子要素のみであり、孫要素（1階層よりも下の要素）は取得できない、ということです。
実装コード
<div id="parent1">
<div id="parent2">
<p id="child1">子要素1</p>
<p id="child2">子要素2</p>
<p id="child3">子要素3</p>
<span id="child4">子要素4</span>
</div>
</div>
<script>
console.log($("#parent1").children())
</script>出力結果
=> [div#parent2]一番上の階層の要素（#parent1）に対してchildren()メソッドを使用していますが、取得されているのは子要素のみ（#parent2）であり、孫要素であるpタグやspanタグは取得されていないのがお分かりいただけるかと思います。
find()メソッドを使って子要素を取得する方法
続いてご紹介するのは、find()メソッドです。
先ほどのchildren()メソッドが取得できるのは子要素のみでしたが、このfind()メソッドを使用すると孫要素まで取得することができます。
実装コード
<div id="parent1">
<div id="parent2">
<p id="child1">子要素1</p>
<p id="child2">子要素2</p>
<p id="child3">子要素3</p>
<span id="child4">子要素4</span>
</div>
</div>
<script>
console.log($("#parent1").find())
</script>出力結果
=> [div#parent2, p#child1, p#child2, p#child3, span#child4]このように、children()メソッドでは取得されなかった孫要素（pタグやspanタグ）も無事取得されているのがお分かりいただけるかと思います。
また、children()メソッドと同様に、引数にセレクタを指定することで、対象となる要素を絞り込むことも可能です。
実装コード
<div id="parent1">
<div id="parent2">
<p id="child1">子要素1</p>
<p id="child2">子要素2</p>
<p id="child3">子要素3</p>
<span id="child4">子要素4</span>
</div>
</div>
<script>
console.log($("#parent1").find("p"))
</script>出力結果
=> [p#child1, p#child2, p#child3]contents()メソッドを使って子要素を取得する方法
最後にご紹介するのは、contents()メソッドです。
children()メソッドと基本的な機能は似ているのですが、その違いは、contents()メソッドを使うと指定した要素のテキストノードまで取得できる、ということです。
そのため、取得した要素のテキストを別のタグで囲む、という処理も実装可能となります。
実装コード
<div id="parent1">
<div id="parent2">
<p id="child1">子要素1</p>
<p id="child2">子要素2</p>
<p id="child3">子要素3</p>
<span id="child4">子要素4</span>
</div>
<button id="btn">クリック</button>
</div>
<script>
$(function() {
// ボタンをクリックするとpタグのテキストを全てstrongタグで囲います
$("#btn").click(function() {
$("#parent2").contents().each(function(index, element){
$(element).contents().wrap("<strong>")
})
});
});
</script>実行結果
<div id="parent1">
<div id="parent2">
<p id="child1"><strong>子要素1</strong></p>
<p id="child2"><strong>子要素2</strong></p>
<p id="child3"><strong>子要素3</strong></p>
<span id="child4"><strong>子要素4</strong></span>
</div>
<button id="btn">クリック</button>
</div>jQueryで子要素を取得する方法の使い分け
最後にそれぞれの方法の使い分けについてまとめておきます。
| ケース | 方法 |
|---|---|
| 子要素のみ取得する | セレクタ or children()メソッド |
| 子孫要素を取得する | セレクタ or find()メソッド |
| 子要素のテキストノードを取得する | contents()メソッド |
セレクタを使用すべきか否か、という判断基準は、正直なところ、「好みの問題」になってくるかと思います。
実際のところ、「セレクタを使った方がシンプルでいいじゃん」という方もいれば、「メソッドを使用しないと何をしているか分かりづらい」という方もいるというのが実情です。
処理速度にもそれほど大きな違いはないため、プロジェクトのルールとして定められていればそちらに従いましょう。
そうでなければ、場面に応じて、より分かりやすく直感的に使用できる方を採用する形で問題ありません。
お仕事の途中ですが、少し一休みして、転職や独立について考えてみませんか🙌？
現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】
レバテックフリーランスの評判ってどう？【現役エンジニアが徹底解説します】
MidWorks（ミッドワークス）の評判ってどう？【現役エンジニアが徹底解説します】
日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲
最後に
さて、ここまで、jQueryで子要素を取得する方法について解説してきましたがいかがでしたか？
いずれの方法も、使い方自体はとてもシンプルなので、実際の開発でもすぐに使っていただけるかと思います。
ただ、取得したい要素によって使用するメソッドは変わってきますので、その点は覚えておいてくださいね。
このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。
みなさんこんにちは！ 今回の記事は、 悩みを抱えた人 ・jQueryを使って親要素を取得する方法が知りたい・祖先要素を取得するにはどうしたらいいの？・parent()、parents()、closest()の違いってなに？ […]
