jQuery｢.contents( )｣で指定要素の子要素・テキストノードを取得する方法

2020年8月18日

jQueryの「.contents( )」は、指定要素の子要素・テキストノードを取得する事ができるメソッド

今回は、jQueryの「.contents( )」について、その使い方をサンプルを交えて解説しよう。

シンプルに「子要素だけの選択」であれば.children()メソッドでも利用できるが「タグに囲われていないテキストノード」を選択する場合に.contents( )を利用する。

▶ jQuery｢.children() / .find()｣で子要素を取得する方法

.contents()の機能とは？

.contents()の機能

.contents()は、「指定要素の子要素・テキストノードを取得する」事ができる。

子要素・テキストノードが取得できるので、主に「テキストノード」を取得したい場合や、jqueryオブジェクトの代わりに「iframe」を指定する事でiframe内のdocumentを選択する（同ドメイン内のみ）時に利用する事が多い。

.contents()の構文

.contents()の構文は次のような記述となる

$("セレクタ").contents();

.contents()の使用例

たとえば次のようなHTMLがあったとする

HTML

<ul>
  <li>りんご</li>
  <li class="target">バナナ</li>
  <li>みかん</li>
  <li>もも</li>
</ul>

jQuery

$(function(){
  $(".target").contents().wrap("<span>")
});

この例ではclass="target"内のテキストノードを取得し<span>タグで囲む事ができ、この場合「バナナ」がspanタグで囲われる。

実際の動きをcodePenで見てみよう。

See the Pen jquery-contents by stand4u (@stand4u) on CodePen.

AI時代にHTML・CSS・Jqueryの学習は不要説

AIの進化に指をくわえて見ているだけでいいのか？

ClaudeやCodexなどのAIの進化のスピードに脅威を感じないだろうか？HTMLやCSSやjQueryなどは、ClaudeやCodexに頼めばほんの１〜２分で完成していまいます。とてもスピードでは太刀打ちできないし、人間がゼロベースからHTMLコーディングをする仕事は、いずれ終焉を迎えるでしょう。では、HTMLコーディングを学ぶ必要は無いのか？

「その答えはNOです。」

コーディングを学ぶ、その理由は？

AIでバイブコーディングをしているプロの方なら分かると思うのですが、AIが出すコードにも調整が必要な事が多々あるという事。例えば「ここはflexを使った方が後々楽になる」とか、「ここはまとめて変数で指定してほしい」など、HTMLを理解した上でAIに具体的に指示する方が圧倒的に速い。さらにちょっとした修正なら、いちいちAIに言葉を考えて説明するより「自分で修正した方が楽な場合がよくある」という事。つまりまとめると、AIにコーディングさせるなら、人間もコーディングを理解している方が圧倒的に良いという事である。

AI時代に、体系的に学ぶコーディング手法

普段ClaudeやCodexを使ってバイブコーディングをしている私が、必要と感じるHTMLの学習を、基礎からみっちり理解しつつも、最新のコーディング手法を学べ、初心者の方がついてイケるように、HTMLの基礎理論から、スマホのためのレスポンシブコーディングまでを、新しいCSSの変数やネスト記法やjQueryを使った開閉メニューの実装やFigmaデータからのコーディングの仕方など、ゼロからひと通りコーディングできるまで体系的に学べる動画講座を作りました。

「動画の無料プレビュー」もあるので、一度覗いてみてください▼