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.

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント